How to use vue scaffolding and vue-router

This time I will show you how to use vue scaffolding and vue-router, and what are the precautions for using vue scaffolding and vue-router. The following is a practical case. Let’s take a look. .

First of all, under the premise that vue-cli has been installed, and after

cnpm install (the official website uses npm, but it is recommended to use cnpm here, which is faster than npm and npm sometimes There is a phenomenon of getting stuck). Here is a small reminder about whether to turn on eslint. This is a tool to standardize the code you write. For newbies, it is recommended to turn it off, otherwise the code written will not comply with its specifications. Your compiler will keep reporting errors, as shown below

After installing the scaffolding, it will look like this

Terminal input

npm run dev, then open localhost:8080 and you can see the project running

Let’s roughly analyze some of the more commonly used files, as shown below

1.build: Mainly used to configure the build project and webpack

2.config: Project development configuration

3.npm or cnpm Downloaded dependency package

4. Your source code

5. Static folder, webpack will not package this file when packaging

6. Outermost page Generally, the title and so on are set here

7. Store the json data of the npm dependency package you want

After roughly introducing the project structure, let’s take a look at the source code of its page!

Start with this App.vue. This file is only for the external index, which means that the index contains all pages, and App.vue contains pages except index, that is Route nesting, as will be mentioned later, the files created here are all file names.vue. The HTML format of the page is a template tag containing a p, which is equivalent to a componentized form, and the content of the component is written in this p (A page must have only one template containing one p, and the content is written in this p, otherwise an error will be reported), and this router-view tag is a sub-page under the current page. It can be understood that this router-view is another page. Contained by the current page, somewhat similar to the function of the ifame tag.

css, js format

Now let’s take a look at the HelloWorld.vue page, where the js and css code placement format has been written for you. Yes, just write it in this format. What needs to be reminded is the scoped attribute in the style tag. If this is not written, the style of this style will affect all sub-routes of this page. If it is added, this style will only apply to the current The page works

After reading the page, let’s take a look at the routing configuration as shown below

The routing path is under the router. When you first open it, you will see an error. , it’s actually not a

grammar error, it’s because the compiler compiles the es5 syntax by default, and the vue scaffolding uses the es6 syntax. The compiler I use is webStorm, and it just needs to be set up.

Кратко представим структуру маршрутизаторов. В основном она используется для настройки маршрутов. Как упоминалось выше, все подмаршруты находятся в App.vue. Все App.vue – это самый внешний родительский маршрут. Они хранятся здесь в маршрутах. Он — это массив маршрутов, а путь — это путь, по которому вы хотите получить доступ к созданной вами странице.Здесь написана последовательность корневых путей, поэтому, если вы напрямую обращаетесь к localhost:8080, страница с файлом HelloWorld.vue, вставленным в App. vue (это эквивалентно вложению маршрутизации), имя не имеет значения по сравнению с его присвоением имени. Компонент эквивалентен странице, на которую вы хотите сослаться. Здесь упоминается страница HelloWorld.vue, в основном импорт выше. HelloWorld здесь — это переменная, соответствующая указанному выше файлу Path

Сейчас я научу вас, как создавать файл и настраивать маршрутизацию

Сначала создайте файл с суффиксом vue и напишите самый простой HTML структура

Затем настройте его маршрутизацию.Сначала введите этот файл с помощью импорта, а затем заполните путь для доступа к этому файлу.Я использую /test.Чтобы открыть этот маршрут, введите localhost:8080/#/test.В этом Импортированный файл переносится в компонент

и вводится URL-адрес.Страница с test.vue, вложенная в APP.vue появится

Вложенность маршрутов vue по умолчанию заключается в том, что все страницы вложены в страницу App.vue. Теперь я научу вас, как свободно вкладывать свои собственные страницы. Теперь я вложу тестовую страницу в страницу HelloWorld.vue

Сначала добавлю метку представления маршрутизатора под интерфейсом HelloWorld.vue

Затем настрою подмаршрут HelloWorld.vue

Таким образом, localhost:8080/#/test — это страница, на которой APP.vue вкладывает HelloWorld.vue и test.vue, как показано ниже

#Это так просто Вложение маршрутов завершено. Давайте поговорим о переходе маршрутизации. Например, если вы привязываете функцию к кнопке и нажимаете кнопку, чтобы перейти к тестовую страницу, вы можете использовать

this.$router.push({path:'/test'})

в функции, если хотите вернуться на предыдущую страницу. Общее содержание страницы —

this.$router.go(-1)

. Если есть какие-либо ошибки или сожаления, пожалуйста, простите меня или свяжитесь со мной, чтобы мы могли больше общаться!

Я считаю, что вы освоили этот метод после прочтения примера, описанного в этой статье. Для получения более интересной информации обратите внимание на другие статьи по теме на китайском веб-сайте php! Рекомендуется к прочтению

#Как справиться с конфликтом между событиями двойного щелчка и щелчка в JS

###Элегантное использование CSS-модули в методе Vue#########

The above is the detailed content of How to use vue scaffolding and vue-router. For more information, please follow other related articles on the PHP Chinese website!