<>Vue Routing configuration

Why use routing ?

   Created in project First.vue and Second.vue Two pages , If you operate as a component, these two pages , Data is permanently displayed on the App.vue
in , But we know that normal projects are through different channels URL Control the display of different pages . stay SPA( Single page application ) In the project , It also needs to pass different URL stay App.vue
Display different data in . Routing is done through URL Controls which page is displayed in the App.vue Functions in / assembly .

What is routing ?

   stay Vue The middle way is to control which page is displayed , The page displayed through routing is displayed in App.vue Medium , When changed URL Only change after App.vue
The content corresponding to the routing part in the page , That is, when displayed through route , It also belongs to local refresh effect .

notes : stay App.vue Passed in <router-view> Show routing content .

<>1. Install routing dependencies

stay IDEA Medium Terminal Panel run command :cnpm install --save vue-router

explain :--save Indicates that the added dependency is written to package.json, without --save The effect is also OK , But in addition, we can better know which components are used in the project .

After successful operation, the package.json Added in router Related dependency :

<>2. Create two new pages

stay src New under views folder , And created two new folders under this folder .vue Page of :

Page one :src/views/First.vue
<template> The First Page. </template> <script> export default { name: "First"
} </script> <style scoped> </style>
Second page :src/views/Second.vue
<template> The Second Page. </template> <script> export default { name:
"Second" } </script> <style scoped> </style>
At this time, these two pages cannot be accessed directly .

<>3. modify main.js
import { createApp } from 'vue' import App from './App.vue'
//1. Import route dependency , Installed vue-router Dependency of system after component import { createRouter, createWebHistory }
from 'vue-router'; //2. Import two pages import First from "@/views/First"; import Second
from "@/views/Second"; //3. Create routing object ,new VueRouter For above import Name of the setting const router =
createRouter({ history: createWebHistory(), // No, history, visit URL There will be # routes:[ { path
: '/first', component: First }, { path: '/second', component: Second }, ] });
// be careful use To be in mount before , Use this route createApp(App).use(router).mount('#app');
<>4. modify App.vue

Must have <router-view/> Otherwise, the page of route control cannot be displayed .
<template> <div id="app"> <p> Here is App.vue page </p> <!-- Routing view --> <router-view/> <
MyComponent name=" Zhang San " v-bind:age="15"></MyComponent> </div> </template>

be careful : If npm run serve When starting a running project , The following save message appears :

Need in vue.config.js In the configuration file , Add a line lintOnSave:false, Restart the project .
const { defineConfig } = require('@vue/cli-service'); module.exports =
defineConfig({ transpileDependencies: true, lintOnSave:false // Add this line });
<>5. Optimize structure

hold main.js Routing related content is put into a separate js In the file , This code is easier to maintain . stay src New under router folder , New in folder
index.js.

1,index.js
//1. Import route dependency , Installed vue-router Dependency of system after component import { createRouter, createWebHistory }
from 'vue-router'; //2. Import two pages import First from "@/views/First"; import Second
from "@/views/Second"; const routerHistory = createWebHistory(); //3. Create routing object ,new
VueRouter For above import Name of the setting const router = createRouter({ history: routerHistory,
routes:[ { path: '/first', component: First }, { path: '/second', component:
Second}, ] }); export default router;
Last line export default router The configured routing information must be exported , otherwise main.js Unable to get router object .

2,main.js
import { createApp } from 'vue' import App from './App.vue'
// Import ./router/index The route configured in the file import router from './router/index'
// be careful use To be in mount before , Use this route createApp(App).use(router).mount('#app');
In this way, it is easier to maintain the code after optimization .

Technology
©2019-2020 Toolsou All rights reserved,
C++ of string of compare usage MySQL Basics Commonly used sentence ( Add / delete / modify query )C Language of a Gobang game implementation QT5.9 Use of learning notes QSqlQuery Method of Qt Getting Started tutorial 【 Basic controls 】QCalendarWidget calendar control java Polymorphic array of web Front end signature plug-in _signature_pad Plug in implements electronic signature function centos7 install RabbitMqspringboot use redis Experiment 4 Automated test tools - software test