Introduce a,

The pages in Vue are SPA(single page application). Jumping between pages actually changes the content of the page, but the address of the page does not change. This requirement cannot be implemented with <a> tags, so VueRouter makes it easy to switch pages

Single-page application: All pages are eventually packaged into a single VUE interface, which has the advantage of changing the current page content without switching urls, but has the disadvantage of being slower to load the first time


Two, environment building & simple use

1. Install vue-router --save-dev 2. Import the vue-router package, configure the routing object, and expose the route/ /.. / router/index. Js file
import Vue from 'vue'
import Router from 'vue-router'  // Import vue-router package
import Hello from './components/Hello.vue' // The hello. vue page is introduced
import Hi from './components/Hi.vue' // The hello. vue page is introduced

Vue.use(Router) // Install the plug-in into the Vue project

// Create the Router object and expose itConst router = new router ({routes: [{path: '/', // Routing link component: Hello, // routing link name: 'Hello' // routing link name}, {path: '/Hi', component: Hi, name: 'Hi'} ] }) export default router 3. Mount the Router object to the Vue global instance/ / the main js file
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

new  Vue({
  render: h => h(App),
  router
}).$mount(' # 'app) 4. In the app.vueAdd < the router - the view > < / router - the view >/ / App. Vue file
<template>
  <div>
    <router-view style='flex:1'>   new Vue({ render: h => h(App), router }).$mount('#app') 5. Open the service, enter the browser to jump to the corresponding interface, http://localhost:8080/#/ will access the Hello interface, http://localhost:8080/#/Hi will access the Hi interfaceCopy the code

Three, VueRouter learning

1. Use router-link to switch to a router

Note: Router-view can be used only after it is added to the top-level interface app. vue

/ / App. Vue file
<template>
  <div> < the router - link to = "/" > home page < / router - the link > | < the router - link to = "/ hi" > hi page < / router - the link > < routet - view style ="flex:1'>  Copy the code

2. Configure child route redirects

Note: You need to add router-view to the top-level interface app. vue. If there are child routes, you also need to add router-view to the parent interface

/ /.. / router/index. Js file
export default new Router({
  routes: [             
    { path: '/', name: 'Hello', component: Hello },
    { path:'/hi',
      component:Hi,
      children:[
        {path:'/',component:Hi},
        {path:'hi1',component:Hi1},
        {path:'hi2',component:Hi2},
      ]
    }
  ]
})


/ / App. Vue file
<template>
  <div> < the router - link to = "/" > home page < / router - the link > | < the router - link to = "/ hi" > hi page < / router - the link > | < the router - the link To = "/ hi/hi1" > page 1 - hi < / router - the link > | < the router - link to = "/ hi/hi2" > page 2 < / router - link > - hi// The top-level App needs to add router-view
    <router-view style='flex:1'> < / router - the view > < / div > < / template > / / Hi. Vue page < template > < div class = "hello" > < h1 > {{MSG}} < / h1 > / / zi lu by, Router-view 
        Copy the code

3. Jump with code

this.$router.push('/hi')  // Jump to the HI interface
this.$router.go(1)        / / to go forward
this.$router.go(-1)       / / back
Copy the code

4. Carry parameters when the page jumps

// Jump with parameters
<router-link :to="{name:'hi',params:{username:'jspang', id:'888'}}">Hi </router-link> // Accept this parameter in Hi interface.$route.params.username 
Copy the code

5. Carry parameters when skipping through the browser URL

/ /.. /router/index.jsExport default new Router({routes: [{path:'/', name: 'Hello', component: Hello },
    { 
      path:'/params/:newsId/:newsTitle', Component :Params}]}) // Redirect <router-linkto="/params/198</router-link> </router-link.params.newsId
this.$route.params.newsTitle
Copy the code

6. Vue – Router redirection

/ /.. /router/index.jsExport default new Router({routes: [{path:'/',component: Hello},
    {
      path:'/params/:newsId(\\d+)/:newsTitle', Component :Params}, {// Normal redirection path:'/goback',
      redirect:'/'}, {// Redirection with arguments (\\d+) is regular, indicating that only numeric path is accepted:'/goParams/:newsId(\\d+)/:newsTitle',
      redirect:'/params/:newsId(\\d+)/:newsTitle'}]}) // Page jump <router-linkto="/goback"> Return to the main interface </router-link> <router-linkto="/goParams/198</router-link>Copy the code

7. Setting Mode and handling 404 pages

Mode has two values, hash by default

  • Hash mode (default) : jsapng.com/lms/#/ url with hash sign
  • History mode: jsapng.com/lms/ URLS do not have # signs, just like normal urls
/ /.. / router/index. Js fileExport default new Router({mode: histroy // set the history url without #, e.g. http://jsapng.com/lms/ routes: [{path: '/', component: Hello, name: 'Hello'}, { path: '/Hi', component: Hi, name: 'Hi'}, { path: '*', //404Component: ErrorPage, name: 'ErrorPage'},]})Copy the code

VueRouter; vueRouter

1. You can identify the current interface. You can obtain the name value from $router.name

/ /.. / router/index. Js fileExport default new Router({mode: histroy // set the history url without #, e.g. http://jsapng.com/lms/ routes: [{path: '/', component: Hello, name: 'Hello'}, { path: '/Hi', component: Hi, name: 'Hi'}, { path: '*', //404Component: ErrorPage, name: 'ErrorPage'},]})// In the Hello interface, the value is Hello. If name is not set, there is no value
this.$router.name  
Copy the code

2. When a single page is composed of multiple modules (router-view), it can identify which module to load according to the name

/ /.. / router/index. Js file
export default new Router({
  routes: [            
    {
      path: '/',
      components: {
        default:Hello,
        left:Hi1,
        right:Hi2
      }
    },{
      path: '/Hi',
      components: {
        default:Hello,
        left:Hi2,
        right:Hi1
      }
    }
  ]
})


/ / App. Vue file
<template>
  <div class="hello">
    // Switch the two pages< the router - link to = "/" > home page < / router - the link > | < the router - link to = "/ hi" > hi page < / router - the link > | < the router - the view > < / router - the view >// Left interface
	<router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;" ></router-view>// Right interface
	<router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;" ></router-view> </div>
</template>
Copy the code


Four, knowledge summary

  1. VueRouter. Why VueRouter

  2. VueRouter creation process and simple use of 4′

  3. The use of VueRouter

    1. If router-link is used, you need to add a router-View to the top-level interface

    2. 2. You need to add router-view to the parent interface to enable router redirection when child routes exist

    3. Jump using code

    4. Internal parameters are transmitted when the page is redirected

    5. The parameter is passed when the browser URL jumps

    6. Vue-router redirection

    7. Mode Settings and 404 page processing

    8. Vue-router Specifies the role of name

      1. The current interface can be identified by using $router.name to obtain the name value

      2. Single page multiple Router-views A page consists of multiple VUE interfaces


Five, the study

  • Video: v.qq.com/x/page/b039… 31-41

  • Article: jspang.com/detailed?id…