Basic skills of Vue [VII. Vue router routing knowledge]

Posted by integravtec on Tue, 18 Feb 2020 11:18:05 +0100

1. The concept of routing

Concept of Routing:
- Back end Routing: for a normal website, all hyperlinks are URL addresses, and all URL addresses correspond to the corresponding resources on the server
- Front end Routing: for single page applications, the main way to switch between different pages is through the hash(ා) in the URL. At the same time, hash has one feature: HTTP requests do not contain hash related content; therefore, the page Jump in single page applications is mainly implemented by hash;
Single page concept:
- Multi page: MPa multiple page application uses a link
- Single page: Spa single page application judges the change of hash (Vue router)

2. Basic use of Vue router

Step 1: import vue.js, then import Vue router.js and Vue router after Vue

Step 2: set route

a. Configuration information for configuration page components

let Component configuration variables ={
  	template:"#Template id ",
    data(){
      return{}
    }
    ...
}

b. Establish a mapping relationship

let routes = [
		{
      path:"/address",
      component:Component configuration variables
    },
    {
      path:"/address/:id",    // Dynamic routing
      component:Component configuration variables
    },
  	{
      path:"/address",
      components:{
        default:Component configuration variables      // <router-view name="default"/>
        //Name of the view:Component configuration variables    // < router view name = "view name" / >
      }
    },
    {
      path:"/address",   // Go back to address 2 when visiting address
      component:Component configuration variables,
      redirect:"/Address 2"   
    },
  	{
      path:"/address",    
      component:Component configuration variablesA,
      children:[
        {
          path:"Address 2",    
      				 // Access / address / address2  
          		 //The rendering component configuration variables will be rendered in the component configuration variable A template, in the router view
          component:Component configuration variables
        }
      ]
    }

]

Instantiate a routing object

let router = new VueRouter({
	  // Routes: routes / / routes
	  routes
})

Mount to Vue instance

new Vue({
	el:"",
	data:{},
	// router:router / / short
	router
})

Set the view in the template of vue

<div  id="app">
  	<router-view/>
</div>

Use router link for page Jump
```
<router-link to="/address">
```

Code implementation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <!-- Introduce vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Introduce vue-router.js  Be sure to introduce vue after -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        body{
            background-color: #000;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            background-color: #fafafa;
            min-width: 320px;
            max-width: 640px;
            height: 100vh;   /*v Is the height of the viewport vh viewport */
            margin: 0 auto;
            position: relative;
            box-sizing: border-box;
            padding: 40px 0 60px;
        }
        .header{
            width: 100%;
            height: 40px;
            text-align: center;
            background-color: orange;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
        }
        .content{
            height: 100%;
            overflow-y: scroll;
        }
        .footer{
            width: 100%;
            height: 60px;
            background-color: #fff;
            border-top: 1px solid #eee;
            color: #fff;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header"></div>
        <div class="content">
            <!-- View component. Component rendering here -->
           <router-view></router-view>
        </div>
        <div class="footer">
            <!-- router-link The component will eventually render as a -->
            <router-link to="/">home page</router-link>
            <router-link to="/menus">classification</router-link>
            <router-link to="/car">Shopping Cart</router-link>
            <router-link to="/user">user</router-link>
        </div>
    </div>
</body>
<script>
    // Step 2: define the components required for the page
    let index = {
        template:"<h1>home page</h1>",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let menus = {
        template:"<h1>classification</h1>",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let car = {
        template:"<h1>Shopping Cart</h1>",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let user = {
        template:"<h1>user</h1>",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    // Step 3: establish route mapping relationship / index / menus menus / car car / user user
    let ysgx = [
        {
            path:"/",
            component:index
        },
        {
            path:"/menus",
            component:menus
        },
        {
            path:"/car",
            component:car
        },
        {
            path:"/user",
            component:user
        }
    ]
    // Step 4: create a route (instantiate a route object)
    let ly = new VueRouter({
        routes: ysgx   //routes route configuration information
    });

    // Step 5: inject the routing instance into the Vue instance
    new Vue({
        el:"#app",
        data:{
            
        },
        router:ly
    })
</script>
<script>

// What is routing:

    // Back end Routing: for ordinary websites, all hyperlinks are URL addresses, and all URL addresses correspond to the corresponding resources on the server
    // Front end Routing: for single page applications, the main way to switch between different pages is through the hash(ා) in the URL. At the same time, hash has one feature: HTTP requests do not contain hash related content; therefore, the page Jump in single page applications is mainly implemented by hash;

// Single page application:
    // Multi page MPa multiple page application using a link
    // Single page spa single page application   

 
// The route of Vue router Vue realizes hash change. Page changes (rendering different components)

    // Step 1: import vue to import vue router
    // Step 2: configure page components
    // Step 3: configure what address the mapping relationship accesses and what components it renders
    // Step 4: instantiate a routing object and put the configuration mapping relationship into
    // Step 5: inject the routing object into the Vue instance
</script>
</html>

3. Activate class, routing mode, redirection, 404

Activate class

// When instantiating a routing object
let router = new VueRouter({
   routes:routes,
   activeLinkClass:"activation class name"  // As long as the address of the page is the same as that in the a link, this a will be added to this class
})
// Note: there is a pit
//    If the home page is set to / then it will also be matched. This is because the route is not strictly matched.
// Solution: < router link exact to = "/" > Home Page < / router link >

Routing mode

// When instantiating a routing object
let router = new VueRouter({
   routes:routes,
   mode:"hash/history"  // By default, the hash history must run in the server mode
})

redirect

let routes = [
	 {
      path:"/address",   // Go back to address 2 when visiting address
      component:Component configuration variables,
      redirect:"/Address 2"   
    },
]

Configure the page displayed when some routes are not set

let routes = [
	 {   // General configuration at the end
      path:"*",   //  The route is not set and does not match to. Then render the components here 
      component:Component configuration variables
    },
]

code implementation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <!-- Introduce vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Introduce vue-router.js  Be sure to introduce vue after -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        body{
            background-color: #000;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            background-color: #fafafa;
            min-width: 320px;
            max-width: 640px;
            height: 100vh;   /*v Is the height of the viewport vh viewport */
            margin: 0 auto;
            position: relative;
            box-sizing: border-box;
            padding: 40px 0 60px;
        }
        .header{
            width: 100%;
            height: 40px;
            text-align: center;
            background-color: orange;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
        }
        .content{
            height: 100%;
            overflow-y: scroll;
        }
        .footer{
            width: 100%;
            height: 60px;
            background-color: #fff;
            border-top: 1px solid #eee;
            color: #fff;
            position: absolute;
            left: 0;
            bottom: 0;
        }
        .footer a{
            width: 25%;
            float: left;
            text-align: center;
            line-height: 60px;
        }
        .footer a.active{
            background-color: orange;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header"></div>
        <div class="content">
            <!-- View component. Component rendering here -->
           <router-view></router-view>
        </div>
        <div class="footer">
            <!-- router-link The component will eventually render as a -->
            <router-link exact to="/">home page</router-link>
            <router-link to="/menus">classification</router-link>
            <router-link to="/car">Shopping Cart</router-link>
            <router-link to="/user">user</router-link>
        </div>
    </div>

    <!---------------------Home template--------------------------->
    <template id="index">
        <div class="page">
            <h3>I am index</h3>
        </div>
    </template>
     <!---------------------Classification template--------------------------->
     <template id="menus">
        <div class="page">
            <h3>I am classified. x</h3>
        </div>
    </template>
     <!---------------------Shopping cart template--------------------------->
     <template id="car">
        <div class="page">
            <h3>I'm a shopping cart</h3>
        </div>
    </template>
     <!---------------------user template--------------------------->
     <template id="user">
        <div class="page">
            <h3>I am the user.</h3>
        </div>
    </template>
     <!---------------------404--------------------------->
     <template id="notfound">
        <div class="page">
            <h3>Can't find this damn page</h3>
        </div>
    </template>

</body>
<script>
    // Step 2: define the components required for the page
    let index = {
        template:"#index",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let menus = {
        template:"#menus",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let car = {
        template:"#car",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let user = {
        template:"#user",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let notfound = {
        template:"#notfound",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    // Step 3: establish route mapping relationship / index / menus menus / car car / user user
    // let ysgx = [
    let routes = [
        {
            path:"/",            // Access address
            component:index,     // Components rendered corresponding to address
            redirect:"/car"      // redirect
        },
        {
            path:"/menus",
            component:menus
        },
        {
            path:"/car",
            component:car
        },
        {
            path:"/user",
            component:user
        },
        {
            path:"*",  // This option is the last mapping relationship
            component:notfound
        }
    ]
    // Step 4: create a route (instantiate a route object)
            // New vuerouter (configuration object)
    // let ly = new VueRouter({
    let router = new VueRouter({
        // Routes: ysgx / / routes route configuration information
        // routes: routes / / the preceding routes are fixed configuration items and routes are variable names
        routes,
        linkActiveClass:"active",   // Activate class note: the pit is the home page / router link needs to add an exact
        // mode:"history" / / routing mode, hash default history 
    });

    // Step 5: inject the routing instance into the Vue instance
            // There is a router configuration option in the vue instance 
    new Vue({
        el:"#app",
        data:{
            
        },
        // router:ly
        // router:router
        router  // router:router
    })
</script>
<script>
</script>
</html>

4. Dynamic routing settings

How to set:

let routes = [
	 {  
      path:"/list/:id",      //    Visit / list/10  
      component:Component configuration variables
    },
]

<router-link to="/list/10">News 10</router-link>

How to get this dynamic parameter:

// Inside the jump component:
this.$route   // Current routing information
this.$route.params   // Dynamic data of current route
this.$route.params.id  // Get value

When to use: multi level page Jump, transfer key parameters. For example, from list to details, pass in ID

Code implementation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <!-- Introduce vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Introduce vue-router.js  Be sure to introduce the vue after -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        body{
            background-color: #000;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            background-color: #fafafa;
            min-width: 320px;
            max-width: 640px;
            height: 100vh;   /*v Is the height of the viewport vh viewport */
            margin: 0 auto;
            position: relative;
            box-sizing: border-box;
            padding: 40px 0 60px;
        }
        .header{
            width: 100%;
            height: 40px;
            text-align: center;
            background-color: orange;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
        }
        .content{
            height: 100%;
            overflow-y: scroll;
        }
        .footer{
            width: 100%;
            height: 60px;
            background-color: #fff;
            border-top: 1px solid #eee;
            color: #fff;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header"></div>
        <div class="content">
            <!-- View component. Component rendering here -->
           <router-view></router-view>
        </div>
        <div class="footer">
            <!-- router-link The component will eventually render as a -->
            <router-link to="/">home page</router-link>
            <router-link to="/menus">classification</router-link>
            <router-link to="/car">Shopping Cart</router-link>
            <router-link to="/user">user</router-link>
        </div>
    </div>

    <!---------------------Home template--------------------------->
    <template id="index">
        <div class="page">
            <h3>I am index</h3>
        </div>
    </template>
     <!---------------------Classification template--------------------------->
     <template id="menus">
        <div class="page">
            <h3>I am classified. x</h3>
            <ul>
                <li> <router-link to="/list/1">AAA</router-link> </li>
                <li> <router-link to="/list/2">BBB</router-link> </li>
            </ul>
        </div>
    </template>
     <!---------------------Shopping cart template--------------------------->
     <template id="car">
        <div class="page">
            <h3>I'm a shopping cart</h3>
        </div>
    </template>
     <!---------------------user template--------------------------->
     <template id="user">
        <div class="page">
            <h3>I am the user.</h3>
        </div>
    </template>

     <!---------------------List template--------------------------->
     <template id="list">
        <div class="page">
            <h3>I am a list.</h3>
        </div>
    </template>

</body>
<script>
    // Step 2: define the components required for the page
    let index = {
        template:"#index",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let menus = {
        template:"#menus",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let car = {
        template:"#car",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let user = {
        template:"#user",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let list = {
        template:"#list",
        data(){
            return{

            }
        },
        created(){
            console.log(this.$route);  // Current routing information
            console.log(this.$route.params);
            
            
        }
    }
    // Step 3: establish route mapping relationship / index / menus menus / car car / user user
    let ysgx = [
        {
            path:"/",
            component:index
        },
        {
            path:"/menus",
            component:menus
        },
        {
            path:"/car",
            component:car
        },
        {
            path:"/user",
            component:user
        },
        {
            path:"/list/:id",  // /list/2
            component:list
        }
    ]
    // Step 4: create a route (instantiate a route object)
    let ly = new VueRouter({
        routes: ysgx   //routes route configuration information
    });

    // Step 5: inject the routing instance into the Vue instance
    new Vue({
        el:"#app",
        data:{
            
        },
        router:ly
    })
</script>
<script>
</script>
</html>

5. Programming navigation

Essence: control page Jump through JS

Realization:

this.$router  // Current routing object
// Push to open a new page
// go(-1,0,1) forward, backward, refresh
// back() back
// forward()

this.$router.push(path address)
this.$router.go(1/-1/0)
this.$router.back()
this.$router.forward()

Code implementation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <!-- Introduce vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Introduce vue-router.js  Be sure to introduce vue after -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        body{
            background-color: #000;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            background-color: #fafafa;
            min-width: 320px;
            max-width: 640px;
            height: 100vh;   /*v Is the height of the viewport vh viewport */
            margin: 0 auto;
            position: relative;
            box-sizing: border-box;
            padding: 40px 0 60px;
        }
        .header{
            width: 100%;
            height: 40px;
            text-align: center;
            background-color: orange;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
        }
        .content{
            height: 100%;
            overflow-y: scroll;
        }
        .footer{
            width: 100%;
            height: 60px;
            background-color: #fff;
            border-top: 1px solid #eee;
            color: #fff;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header"></div>
        <div class="content">
            <!-- View component. Component rendering here -->
           <router-view></router-view>
        </div>
        <div class="footer">
            <!-- router-link The component will eventually render as a -->
            <router-link to="/">home page</router-link>
            <router-link to="/menus">classification</router-link>
            <router-link to="/car">Shopping Cart</router-link>
            <router-link to="/user">user</router-link>
        </div>
    </div>

    <!---------------------Home template--------------------------->
    <template id="index">
        <div class="page">
            <h3>I am index</h3>
            <!-- <button @click="go">I'm going to the user center</button> -->
            <button @click="$router.push('/user')">I'm going to the user center</button>
        </div>
    </template>
     <!---------------------Classification template--------------------------->
     <template id="menus">
        <div class="page">
            <h3>I am classified. x</h3>
        </div>
    </template>
     <!---------------------Shopping cart template--------------------------->
     <template id="car">
        <div class="page">
            <h3>I'm a shopping cart</h3>
        </div>
    </template>
     <!---------------------user template--------------------------->
     <template id="user">
        <div class="page">
            <h3>I am the user.</h3>
            <button @click="$router.back()">Return</button>
        </div>
    </template>

</body>
<script>
    // Step 2: define the components required for the page
    let index = {
        template:"#index",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{
            go(){
                console.log("go");
                console.log(this.$router);
                // push() back()  forward()  go()
                this.$router.push('/user');
            }
        }
    }
    let menus = {
        template:"#menus",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let car = {
        template:"#car",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let user = {
        template:"#user",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    // Step 3: establish route mapping relationship / index / menus menus / car car / user user
    let ysgx = [
        {
            path:"/",
            component:index
        },
        {
            path:"/menus",
            component:menus
        },
        {
            path:"/car",
            component:car
        },
        {
            path:"/user",
            component:user
        }
    ]
    // Step 4: create a route (instantiate a route object)
    let ly = new VueRouter({
        routes: ysgx   //routes route configuration information
    });

    // Step 5: inject the routing instance into the Vue instance
    new Vue({
        el:"#app",
        data:{
            
        },
        router:ly
    })
</script>
<script>
// <! -- Programming navigation: using JS to control navigation using JS to control page Jump -- >
//  Programming navigation is: there is a $router in this component to represent the instantiated routing object.  
                    // This routing object has push(); go(); back(); forward();
</script>
</html>

6. Named view

Nature: when accessing a routing path, multiple components are rendered in different views at the same time

Realization:

let routes = [
   {
      path: "/ address",
      components:{
        Default: component configuration variable / / < router view name = "default" / >
        View name A: component configuration variable A / / < router view name = "view name A" / >
      }
    },
]

<router-view name="default"/>
<router-view name="Name of the view A"/>

Code implementation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <!-- Introduce vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Introduce vue-router.js  Be sure to introduce the vue after -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        body{
            background-color: #000;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            background-color: #fafafa;
            min-width: 320px;
            max-width: 640px;
            height: 100vh;   /*v Is the height of the viewport vh viewport */
            margin: 0 auto;
            position: relative;
            box-sizing: border-box;
            padding: 40px 0 60px;
        }
        .header{
            width: 100%;
            height: 40px;
            text-align: center;
            background-color: orange;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
        }
        .content{
            height: 100%;
            overflow-y: scroll;
        }
        .footer{
            width: 100%;
            height: 60px;
            background-color: #fff;
            border-top: 1px solid #eee;
            color: #fff;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header"></div>
        <div class="content">
            <!-- View component. Component rendering here -->
            <div class="box1">
                <router-view name="default"></router-view>
            </div>
            <div class="box2">
                <router-view name="aa"></router-view>
            </div>
            <div class="box3">
                <router-view name="bb"></router-view>
            </div>
        </div>
        <div class="footer">
            <!-- router-link The component will eventually render as a -->
            <router-link to="/">home page</router-link>
            <router-link to="/menus">classification</router-link>
            <router-link to="/car">Shopping Cart</router-link>
            <router-link to="/user">user</router-link>
        </div>
    </div>

    <!---------------------Home template--------------------------->
    <template id="index">
        <div class="page">
            <h3>I am index</h3>
        </div>
    </template>
     <!---------------------Classification template--------------------------->
     <template id="menus">
        <div class="page">
            <h3>I am classified. x</h3>
        </div>
    </template>
     <!---------------------Shopping cart template--------------------------->
     <template id="car">
        <div class="page">
            <h3>I'm a shopping cart</h3>
        </div>
    </template>
     <!---------------------user template--------------------------->
     <template id="user">
        <div class="page">
            <h3>I am the user.</h3>
        </div>
    </template>

</body>
<script>
    // Step 2: define the components required for the page
    let index = {
        template:"#index",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let menus = {
        template:"#menus",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let car = {
        template:"#car",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let user = {
        template:"#user",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }

    let shuai = {
        template:"<h1>I am very handsome</h1>"
    }
    let mei = {
        template:"<h1>I am beautiful.</h1>"
    }

    // Step 3: establish route mapping relationship / index / menus menus / car car / user user
    let ysgx = [
        {
            path:"/",
            component:index
        },
        {
            path:"/menus",
            component:menus
        },
        {
            path:"/car",  // When accessing car, render the car component at the same time. shuai component, mei component
            // component:car
            components:{
                default:car,
                aa:shuai,
                bb:mei
            }
        },
        {
            path:"/user",
            component:user
        }
    ]
    // Step 4: create a route (instantiate a route object)
    let ly = new VueRouter({
        routes: ysgx   //routes route configuration information
    });

    // Step 5: inject the routing instance into the Vue instance
    new Vue({
        el:"#app",
        data:{
            
        },
        router:ly
    })
</script>
<script>
// Named view: an address renders a component. Sometimes we want to access a path address and render multiple components at the same time

// Use:

    /*
    {
        path:"Address,
        components:{
            default:Component components will be rendered in < router view name = "default" >
            Name A: component A component A will be rendered in < router view name = "name A" >
            Name B: component B component B will be rendered in < router view name = "name B" >
        }
    }
    // To name a view, you must pay attention to the correspondence of views

    */

</script>
</html>

7. Nested route

Essence: a page needs a different content display area inside. For example: personal center, the left side is the menu of personal center, and the right side is the content of different menus.

Realization:

let routes = [
   {
      path:"/address",    
      component:Component configuration variablesA,
      children:[
        {
          path:"Address 2",    // Remember not to add/
      				 // Access / address / address2  
          		 //The rendering component configuration variables will be rendered in the component configuration variable A template, in the router view
          component:Component configuration variables
        }
      ]
    }
]

//There should be a router view inside component A, rather than rendering in the root level router view

Code implementation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .nav{
            width: 1200px;
            line-height: 60px;
            background-color:red;
            margin: 0 auto;
        }
        .nav li{
            display: inline-block;
        }
        .content{
            width: 1200px;
            height: 400px;
            background-color: #eee;
            margin: 0 auto;
        }
        .left{
            width: 200px;
            background-color: orange;
           float: left;
        }
        .right{
            width: 700px;
            height: 400px;
            background-color: blue;
            float: left;
        }
    </style>
     <!-- Introduce vue.js -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- Introduce vue-router.js  Be sure to introduce the vue after -->
     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <div class="nav">
            <ul>
                <li> <router-link to='/'>home page</router-link> </li>
                <li> <router-link to='/user'>User center</router-link> </li>
            </ul>
        </div>
        <div class="content">
            <router-view></router-view>
        </div>
    </div>
    <!---------------------Home template--------------------------->
    <template id="index">
        <div class="page">
            <h3>I am index</h3>
        </div>
    </template>
     <!---------------------user template--------------------------->
     <template id="user">
        <div class="page">
            <div class="left">
                <ul>
                    <li> <router-link to="/user/userorder">My order</router-link> </li>
                    <li> <router-link to="/user/useraddress">My address</router-link> </li>
                </ul>
            </div>
            <div class="right">
                <router-view/>
            </div>
        </div>
    </template>
</body>
<script>
// A route is set in the route
</script>
<script>
    // Step 2: define the components required for the page
    let index = {
        template:"#index",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let user = {
        template:"#user",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }

    let userInfo = {
        template:"<h1>I'm the user center</h1>"
    }
    let userOrder = {
        template:"<h1>I am a user order</h1>"
    }
    let userAddress = {
        template:"<h1>I am the user address</h1>"
    }
    
    // Step 3: establish route mapping relationship / index / menus menus / car car / user user
    let ysgx = [
        {
            path:"/",
            component:index
        },
        {
            path:"/user",
            component:user,
            redirect:"/user/userinfo",
            children:[  // The sub route of the current route. Components will also be rendered in the router view inside the current component
                {
                    path:"userinfo",   //  Access / user/userinfo to render the userInfo component
                    component:userInfo
                },
                {
                    path:"userorder",
                    component:userOrder
                },
                {
                    path:"useraddress",
                    component:userAddress
                }
            ]
        }
    ]
    // Step 4: create a route (instantiate a route object)
    let ly = new VueRouter({
        routes: ysgx   //routes route configuration information
    });

    // Step 5: inject the routing instance into the Vue instance
    new Vue({
        el:"#app",
        data:{
            
        },
        router:ly
    })
</script>
</html>

8. Route parameters between pages

Function: transfer of key parameters between multi-level pages
Realization:
- search biography
- Dynamic routing
- Local storage

search biography

<router-link to="/address?Attribute name=Attribute value"></router-link>

// Inside component JS
this.$route.query     // {property name: property value}
this.$route.query.Attribute name

Dynamic routing
- See above

Code implementation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <!-- Introduce vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Introduce vue-router.js  Be sure to introduce the vue after -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        body{
            background-color: #000;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            background-color: #fafafa;
            min-width: 320px;
            max-width: 640px;
            height: 100vh;   /*v Is the height of the viewport vh viewport */
            margin: 0 auto;
            position: relative;
            box-sizing: border-box;
            padding: 40px 0 60px;
        }
        .header{
            width: 100%;
            height: 40px;
            text-align: center;
            background-color: orange;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
        }
        .content{
            height: 100%;
            overflow-y: scroll;
        }
        .footer{
            width: 100%;
            height: 60px;
            background-color: #fff;
            border-top: 1px solid #eee;
            color: #fff;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header"></div>
        <div class="content">
            <!-- View component. Component rendering here -->
           <router-view></router-view>
        </div>
        <div class="footer">
            <!-- router-link The component will eventually render as a -->
            <router-link to="/">home page</router-link>
            <router-link to="/menus">classification</router-link>
            <router-link to="/car">Shopping Cart</router-link>
            <router-link to="/user">user</router-link>
        </div>
    </div>

    <!---------------------Home template--------------------------->
    <template id="index">
        <div class="page">
            <h3>I am index</h3>
            <router-link to='/user?abc=10#ttt=100&bb=200'>To user center</router-link>
        </div>
    </template>
     <!---------------------Classification template--------------------------->
     <template id="menus">
        <div class="page">
            <h3>I am classified. x</h3>
        </div>
    </template>
     <!---------------------Shopping cart template--------------------------->
     <template id="car">
        <div class="page">
            <h3>I'm a shopping cart</h3>
        </div>
    </template>
     <!---------------------user template--------------------------->
     <template id="user">
        <div class="page">
            <h3>I am the user.</h3>
        </div>
    </template>

</body>
<script>
    // Step 2: define the components required for the page
    let index = {
        template:"#index",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let menus = {
        template:"#menus",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let car = {
        template:"#car",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let user = {
        template:"#user",
        data(){
            return{

            }
        },
        created(){
            console.log(this.$route);
            console.log(this.$route.query);  // search parameter content
            
        },
        computed:{},
        watch:{},
        methods:{}
    }
    // Step 3: establish route mapping relationship / index / menus menus / car car / user user
    let ysgx = [
        {
            path:"/",
            component:index
        },
        {
            path:"/menus",
            component:menus
        },
        {
            path:"/car",
            component:car
        },
        {
            path:"/user",
            component:user
        }
    ]
    // Step 4: create a route (instantiate a route object)
    let ly = new VueRouter({
        routes: ysgx   //routes route configuration information
    });

    // Step 5: inject the routing instance into the Vue instance
    new Vue({
        el:"#app",
        data:{
            
        },
        router:ly
    })
</script>
<script>
 //  Pass parameters between pages
    //  Set to dynamic route this.$route.params. Variable  
    //  Pass the parameter this.$route.query. Variable through search
</script>
</html>

9. Named route

Definition: give each route a name

let routes = [
	{ 
	    name:"Routing name",
	    path:"/",
	    component:Component configuration variables
	 }
]

During the visit:

<router-link to="/address?Attribute name=Attribute value"></router-link>
<router-link :to="{name:'Routing name',path:'/address',params:{dynamic parameter},query:{search Pass value}}"></router-link>

Code implementation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <!-- Introduce vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Introduce vue-router.js  Be sure to introduce the vue after -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        body{
            background-color: #000;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            background-color: #fafafa;
            min-width: 320px;
            max-width: 640px;
            height: 100vh;   /*v Is the height of the viewport vh viewport */
            margin: 0 auto;
            position: relative;
            box-sizing: border-box;
            padding: 40px 0 60px;
        }
        .header{
            width: 100%;
            height: 40px;
            text-align: center;
            background-color: orange;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
        }
        .content{
            height: 100%;
            overflow-y: scroll;
        }
        .footer{
            width: 100%;
            height: 60px;
            background-color: #fff;
            border-top: 1px solid #eee;
            color: #fff;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header"></div>
        <div class="content">
            <!-- View component. Component rendering here -->
           <router-view></router-view>
        </div>
        <div class="footer">
            <!-- router-link The component will eventually render as a -->
            <!-- <router-link to="/">home page</router-link> -->
            <router-link :to="{name:'Index'}">home page</router-link>
            <!-- <router-link to="/menus">classification</router-link> -->
            <router-link :to="{path:'/menus'}">classification</router-link>
            <!-- <router-link to="/car/1">Shopping Cart</router-link> -->
            <router-link :to="{name:'Car',params:{id:3}}">Shopping Cart</router-link>
            <router-link to="/user">user</router-link>
        </div>
    </div>

    <!---------------------Home template--------------------------->
    <template id="index">
        <div class="page">
            <h3>I am index</h3>
        </div>
    </template>
     <!---------------------Classification template--------------------------->
     <template id="menus">
        <div class="page">
            <h3>I am classified. x</h3>
        </div>
    </template>
     <!---------------------Shopping cart template--------------------------->
     <template id="car">
        <div class="page">
            <h3>I'm a shopping cart</h3>
        </div>
    </template>
     <!---------------------user template--------------------------->
     <template id="user">
        <div class="page">
            <h3>I am the user.</h3>
        </div>
    </template>

</body>
<script>
    // Step 2: define the components required for the page
    let Index = {
        template:"#index",
        data(){
            return{

            }
        },
        created(){
            console.log(this.$route);
            
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let Menus = {
        template:"#menus",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let Car = {
        template:"#car",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let User = {
        template:"#user",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    // Step 3: establish route mapping relationship / index / menus menus / car car / user user
    let ysgx = [
        {
            path:"/",
            component:Index,
            name:"Index"
        },
        {
            path:"/menus",
            component:Menus,
            name:"Menus"
        },
        {
            path:"/car/:id",
            component:Car,
            name:"Car"
        },
        {
            path:"/user",
            component:User,
            name:"User"
        }
    ]
    // Step 4: create a route (instantiate a route object)
    let ly = new VueRouter({
        routes: ysgx   //routes route configuration information
    });

    // Step 5: inject the routing instance into the Vue instance
    new Vue({
        el:"#app",
        data:{
            
        },
        router:ly
    })
</script>
<script>

</script>
</html>

10. Routing meta information

Definition: we want each route to have its own data. For example, each page has its own title
Implementation: each of our mapping relationship objects has a configuration option called meta. It is an object. We can set related information for this object.

Code implementation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <!-- Introduce vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Introduce vue-router.js  Be sure to introduce the vue after -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        body{
            background-color: #000;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            background-color: #fafafa;
            min-width: 320px;
            max-width: 640px;
            height: 100vh;   /*v Is the height of the viewport vh viewport */
            margin: 0 auto;
            position: relative;
            box-sizing: border-box;
            padding: 40px 0 60px;
        }
        .header{
            width: 100%;
            height: 40px;
            text-align: center;
            background-color: orange;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
        }
        .content{
            height: 100%;
            overflow-y: scroll;
        }
        .footer{
            width: 100%;
            height: 60px;
            background-color: #fff;
            border-top: 1px solid #eee;
            color: #fff;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header"></div>
        <div class="content">
            <!-- View component. Component rendering here -->
           <router-view></router-view>
        </div>
        <div class="footer">
            <!-- router-link The component will eventually render as a -->
            <router-link to="/">home page</router-link>
            <router-link to="/menus">classification</router-link>
            <router-link to="/car">Shopping Cart</router-link>
            <router-link to="/user">user</router-link>
        </div>
    </div>

    <!---------------------Home template--------------------------->
    <template id="index">
        <div class="page">
            <h3>I am index</h3>
        </div>
    </template>
     <!---------------------Classification template--------------------------->
     <template id="menus">
        <div class="page">
            <h3>I am classified. x</h3>
        </div>
    </template>
     <!---------------------Shopping cart template--------------------------->
     <template id="car">
        <div class="page">
            <h3>I'm a shopping cart</h3>
        </div>
    </template>
     <!---------------------user template--------------------------->
     <template id="user">
        <div class="page">
            <h3>I am the user.</h3>
        </div>
    </template>

</body>
<script>
    // Step 2: define the components required for the page
    let index = {
        template:"#index",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{},
        created(){
            console.log(this.$route);
            console.log(this.$route.meta);
            document.title = this.$route.meta.title 
        }
    }
    let menus = {
        template:"#menus",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{},
        created(){
            console.log(this.$route);
            console.log(this.$route.meta);
            document.title = this.$route.meta.title 
        }
    }
    let car = {
        template:"#car",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{},
        created(){
            console.log(this.$route);
            console.log(this.$route.meta);
            document.title = this.$route.meta.title 
        }
    }
    let user = {
        template:"#user",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{},
        created(){
            console.log(this.$route);
            console.log(this.$route.meta);
            document.title = this.$route.meta.title 
        }

    }
    // Step 3: establish route mapping relationship / index / menus menus / car car / user user
    let ysgx = [
        {
            path:"/",
            component:index,
            meta:{  // Each route has its own information
                title:"home page"
            }
        },
        {
            path:"/menus",
            component:menus,
            meta:{  // Each route has its own information
                title:"classification"
            }
        },
        {
            path:"/car",
            component:car,
            meta:{  // Each route has its own information
                title:"Shopping Cart"
            }
        },
        {
            path:"/user",
            component:user,
            meta:{  // Each route has its own information
                title:"user"
            }
        }
    ]
    // Step 4: create a route (instantiate a route object)
    let ly = new VueRouter({
        routes: ysgx   //routes route configuration information
    });

    // Step 5: inject the routing instance into the Vue instance
    new Vue({
        el:"#app",
        data:{
            
        },
        router:ly
    })
</script>
<script>


</script>
</html>

11. Navigation guard

When we enter the route, we want to do something. For example: set title, judge login, and judge permission. At this time, we want to execute a function when the route has entered

Global guard: all route jumps will be executed

Before entering: beforeEach

Instantiated routing object. Beforeeach ((to, from, next) = >{
   //Remember to next(), or the route will be suspended and will not be executed
   next()
})
//Often do: judge login, authority verification, set title

After leaving: afterEach

Instantiated routing object. Aftereach ((to, from) = >{
    //No next
})

Local guard: a route jump will be executed

Before entering:

//Component configuration item:
{
   template:"#id value "，
   data(){
     return{}
   },
   beforeRouteEnter(to,from,next){
     // This is not the current component. Because the component has not yet been created. Do not take the data of setting the current component, because this is not the current component
     next();
   }  
}

Before route update (important):

//Component configuration item:
{
   template:"#id value "，
   data(){
     return{}
   },
   beforeRouteUpdate(to,from,next){
     // this is the current component. 
     // Important: if the current component jumps to the current component, the hook function will be triggered
     next();
   }  
}

Before leaving:

//Component configuration item:
{
   template:"#id value "，
   data(){
     return{}
   },
   beforeRouteLeave(to,from,next){
     // this is the current component. 
     // Function: often make some judgments before leaving, such as whether to save
     next();
   }  
}

Code implementation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <!-- Introduce vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Introduce vue-router.js  Be sure to introduce the vue after -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        body{
            background-color: #000;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            background-color: #fafafa;
            min-width: 320px;
            max-width: 640px;
            height: 100vh;   /*v Is the height of the viewport vh viewport */
            margin: 0 auto;
            position: relative;
            box-sizing: border-box;
            padding: 40px 0 60px;
        }
        .header{
            width: 100%;
            height: 40px;
            text-align: center;
            background-color: orange;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
        }
        .content{
            height: 100%;
            overflow-y: scroll;
        }
        .footer{
            width: 100%;
            height: 60px;
            background-color: #fff;
            border-top: 1px solid #eee;
            color: #fff;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header"></div>
        <div class="content">
            <!-- View component. Component rendering here -->
           <router-view></router-view>
        </div>
        <div class="footer">
            <!-- router-link The component will eventually render as a -->
            <router-link to="/">home page</router-link>
            <router-link to="/menus">classification</router-link>
            <router-link to="/car">Shopping Cart</router-link>
            <router-link to="/user">user</router-link>
        </div>
    </div>

    <!---------------------Home template--------------------------->
    <template id="index">
        <div class="page">
            <h3>I am index</h3>
        </div>
    </template>
     <!---------------------Classification template--------------------------->
     <template id="menus">
        <div class="page">
            <h3>I am classified. x</h3>
        </div>
    </template>
     <!---------------------Shopping cart template--------------------------->
     <template id="car">
        <div class="page">
            <h3>I'm a shopping cart</h3>
        </div>
    </template>
     <!---------------------user template--------------------------->
     <template id="user">
        <div class="page">
            <h3>I am the user.</h3>
        </div>
    </template>

</body>
<script>
    // Step 2: define the components required for the page
    let index = {
        template:"#index",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{},
    }
    let menus = {
        template:"#menus",
        data(){
            return{

            }
        },
        //  Local navigation hook
        beforeRouteEnter(to,from,next){ // Before routing in
            console.log("Before routing in");
            console.log(this);  // window
            next();
        },
        beforeRouteUpdate(to,from,next){  // When the route is updated
            console.log("When the route is updated");
            console.log(this);  // this current component object
            
            next();
        },
        beforeRouteLeave(to,from,next){  //  When the route leaves
            console.log("When the route leaves");
            console.log(this); // this is the current routing information
            next();
        }
    }
    let car = {
        template:"#car",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{},
    }
    let user = {
        template:"#user",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{},

    }
    // Step 3: establish route mapping relationship / index / menus menus / car car / user user
    let ysgx = [
        {
            path:"/",
            component:index,
            meta:{  // Each route has its own information
                title:"home page"
            }
        },
        {
            path:"/menus",
            component:menus,
            meta:{  // Each route has its own information
                title:"classification"
            }
        },
        {
            path:"/car",
            component:car,
            meta:{  // Each route has its own information
                title:"Shopping Cart"
            }
        },
        {
            path:"/user",
            component:user,
            meta:{  // Each route has its own information
                title:"user"
            }
        }
    ]
    // Step 4: create a route (instantiate a route object)
    let ly = new VueRouter({
        routes: ysgx   //routes route configuration information
    });

    // Global front hook   
    // Functions before entering: set title, check whether to log in, and judge authority
    ly.beforeEach(function(to,from,next){
        // to route information 
        // Routing information from from  
        // Make sure to call next() in the next() hook. If you don't call the route, you will not move on
        // console.log(from);
        // console.log(to);    
        document.title = to.meta.title
        console.log("Global front hook");
        next();
    }) 
    // Global post hook
    // Function after leaving: judge whether the page data is saved
    ly.afterEach(function(to,from){
        // to route information 
        // Routing information from  
        // No next
        console.log(from);
        console.log(to);    
        console.log("Global post hook");
    });

    console.log(ly);
    

    

    // Step 5: inject the routing instance into the Vue instance
    new Vue({
        el:"#app",
        data:{
            
        },
        router:ly
    })
</script>
<script>


</script>
</html>

12. Pit (skip route of the same component is not updated)

Description: the route jumps with the component, and the component will not be updated
- If there is a bug at the bottom of the product details page, we cannot get the product data again.
Solve:
- Method 1: use watch to monitor the change of $route
- Method 2: use the route local hook beforeRouteUpdate to call whenever the route is updated

Code implementation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <!-- Introduce vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Introduce vue-router.js  Be sure to introduce the vue after -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        body{
            background-color: #000;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            background-color: #fafafa;
            min-width: 320px;
            max-width: 640px;
            height: 100vh;   /*v Is the height of the viewport vh viewport */
            margin: 0 auto;
            position: relative;
            box-sizing: border-box;
            padding: 40px 0 60px;
        }
        .header{
            width: 100%;
            height: 40px;
            text-align: center;
            background-color: orange;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
        }
        .content{
            height: 100%;
            overflow-y: scroll;
        }
        .footer{
            width: 100%;
            height: 60px;
            background-color: #fff;
            border-top: 1px solid #eee;
            color: #fff;
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header"></div>
        <div class="content">
            <!-- View component. Component rendering here -->
           <router-view></router-view>
        </div>
        <div class="footer">
            <!-- router-link The component will eventually render as a -->
            <router-link to="/">home page</router-link>
            <router-link to="/menus">classification</router-link>
            <router-link to="/car">Shopping Cart</router-link>
            <router-link to="/user">user</router-link>
        </div>
    </div>

    <!---------------------Home template--------------------------->
    <template id="index">
        <div class="page">
            <h3>I am index</h3>
            <ul>
                <li><router-link to="/list/1"> News 1</router-link> </li>
                <li><router-link to="/list/2"> News 2</router-link> </li>
                <li><router-link to="/list/3"> News 3</router-link> </li>
            </ul>
        </div>
    </template>
     <!---------------------List template--------------------------->
     <template id="list">
        <div class="page">
            <h3>I'm the news detail</h3>
            <p>journalistic ID Yes,{{ $route.params.id }}</p>

            <hr>
            <h3>Recommended articles</h3>
            <ul>
                <li><router-link to="/list/111"> News 1111</router-link> </li>
                <li><router-link to="/list/222"> News 2222</router-link> </li>
                <li><router-link to="/list/333"> News 33333</router-link> </li>
            </ul>
        </div>
    </template>

</body>
<script>
    // Step 2: define the components required for the page
    let index = {
        template:"#index",
        data(){
            return{

            }
        },
        computed:{},
        watch:{},
        methods:{}
    }
    let list = {
        template:"#list",
        data(){
            return{

            }
        },
        created(){
            console.log("list Component created");
            console.log(this.$route.params.id);
            this.getdata(); 
        },
        // watch:{
        //     $route:function(){
        //         console.log('route updated ');
        //         this.getdata();
        //     }
        // },
        //  watch: {/ / shorthand
        //     '$route':'getdata'
        // },
        beforeRouteUpdate(to,from,next){  // When the route is updated
            console.log("When the route is updated");
            console.log(this);  // this is the current routing information
            this.getdata();
            next();
        },
        methods:{
            getdata(){
                // ajax
            }
        }
    }
  
    // Step 3: establish route mapping relationship / index / menus menus / car car / user user
    let ysgx = [
        {
            path:"/",
            component:index
        },
        {
            path:"/list/:id",
            component:list
        },
    ]
    // Step 4: create a route (instantiate a route object)
    let ly = new VueRouter({
        routes: ysgx   //routes route configuration information
    });

    // Step 5: inject the routing instance into the Vue instance
    new Vue({
        el:"#app",
        data:{
            
        },
        router:ly
    })
</script>
<script>
//  The route jumps with the component, and the component will not be updated  
    // We can't get the product data again if we recommend the product at the bottom of the bug product details page.

    // Method 1: use watch to monitor the change of $route
    // Method 2: use the route local hook beforeRouteUpdate to call whenever the route is updated

</script>
</html>

Drunk and laughing

Published 9 original articles, won praise 0, visited 86

Private letter follow

Topics: Vue npm Attribute Programming

Programmer Think

Basic skills of Vue [VII. Vue router routing knowledge]

1. The concept of routing

2. Basic use of Vue router

3. Activate class, routing mode, redirection, 404

4. Dynamic routing settings

5. Programming navigation

6. Named view

7. Nested route

8. Route parameters between pages

9. Named route

10. Routing meta information

11. Navigation guard

12. Pit (skip route of the same component is not updated)

Hot Topics