preface

Vue router

1. Basic use mode

1) under the vue introduced vue router < script SRC = “https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js” > < / script > 2) the style before 3) Copy the previous component template template 4) define it before vue instantiation

const writeback = {
    template: '#writeback'
}
const aite = {
    template: '#aite'
}
const zan = {
    template: '#zan'
}
Copy the code
  1. Write a structure inside the main container #app
 <div id="app">
        <div class="bili-content">
            <div class="bili-leftnav">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="bili-rightcontent">

            </div>
        </div>
    </div>
Copy the code
  1. inThe router is instantiated in vUE instantiation
// Vue instantiation
    var vm = new Vue({
        el: '#app'.data() {
            return{}},// Instantiate the router
        router: new VueRouter({
        // Address configuration
            routes: [{}, {}, {},]})}Copy the code

7) here we instantiate the vue, properties inside of the router into a VueRouter instance, the array routes is path and the corresponding component of the information in detail, such as our browser to www.lookroot.cn/writeback… Writeback components

8) Write the instantiation part like this

  // Vue instantiation
    var vm = new Vue({
        el: '#app'.data() {
            return{}},// Instantiate the router
        router: new VueRouter({
            // Address configuration
            routes: [{
                    path: '/writeback'.component: writeback,
                },
                {
                    path: '/aite'.component: aite
                },
                {
                    path: '/zan'.component: zan
                },
            ]
        })
    })
Copy the code

9) Use this in the main container

 <div id="app">
        <div class="bili-content">
            <div class="bili-leftnav">
                <ul>
                    <li>// Router-link is used here<router-link to="/writeback">Reply to my</router-link>
                    </li>
                    <li>
                        <router-link to='/aite'>@ my</router-link>
                    </li>
                    <li>
                        <router-link to='/zan'>Praise my</router-link>
                    </li>
                </ul>
            </div>
            <div class="bili-rightcontent">
                <router-view></router-view>
            </div>
        </div>
    </div>
Copy the code

10) This gives an overview of the effect and the original navigation will have to be modifiedThe router-link will be rendered as an A tag on the pageAs navigation11) need to beLet's differentiate the color that I'm currently selectingMake a difference and add a different color to the style

 /* Displays the current routing color */
        li .router-link-active {
            color: skyblue;
        }
Copy the code

12) Add a little animation to bring in the previous animation effect

<div class="bili-rightcontent">
    <transition enter-active-class="animated fadeInDown" leave-active-class="animated fadeInUp"
        mode="out-in" :duration="200">// This is the place to notice this<router-view></router-view>
    </transition>
</div>
Copy the code

13) is introduced into the animation library < link href = “https://cdn.jsdelivr.net/npm/[email protected]” rel = “stylesheet” type = “text/CSS” > 14) basic effect is achieved Animation effects are added

15) Now there is a small problem that needs to be dealt with. I think its initial state is in the Writeback interface. How to implement it? You need router redirection and a little bit more

// Router redirection
                {
                    // Because the page opens in the initial state will be followed by a slash
                    path: '/'.// Jump to where? To the writeback components
                    redirect: '/writeback'
                },
Copy the code

2. Named views and named routes

1. The router instance has a mode selection

// Instantiate the router
        router: new VueRouter({
            // Mode selection
            mode: 'history'.// Address configuration
            routes: [].Copy the code

Con is address block becomes concise http://127.0.0.1:5500/writeback is to copy the address to other places is unable to open default mode: ‘hash’ that’s the long list of things http://127.0.0.1:5500/4%E3%80%81%20router/routerfirst.html#/writeback

2-1 Naming a view

Why do we need a name? Because you need to show multiple views which isMultiple router-Views need to be displayed1)

2)

<! Vuefooter component Template --><template id="vuefooter">
        <div>
            <h2>footer</h2>
        </div>
    </template>
Copy the code

3) Vue is defined without registration before instantiation

 const vuefooter = {
        template: '#vuefooter'
    }
Copy the code

4) Change the contents of wirteback in routes: [

{
                    path: '/writeback'.// component: writeback,
                    // Because this place needs to show two components
                    components: {
                        // This displays a router-view that has no name by default
                        default: writeback,
                        // The following shows the component with the name name='common'
                        common: vuefooter
                    }
                },
Copy the code

5) Show the effect

2-2 Named route

1) We also name routes to make them easier to use. Writeback is used as an example

{
    path: '/writeback'.// Click the path
    // Name the view
    components: {
        default: writeback,
        common: vuefooter
    },
    // Name the route
    name: 'writeback',},Copy the code

2) Change its navigation links and you’re done

<router-link :to="{name:'writeback'}"> Reply to my </router-link>Copy the code

3. Nested routines are transmitted through routes

2)Define the 2 part of the figure aboveChild components

<! -- This is the figure above2Part -- -- > <! -- This is the child component --><template id="mymsg">
        <div>
        <div>The news of the {{username}}</div>
            <ul>
                <ol v-for="index in 10">
                    <! Where index is passed as id -->
                    <router-link :to="'/mymsg/msgcontent/'+ index">User {{index}}</router-link>
                </ol>
            </ul>
        </div>
    </template>
Copy the code

3) Define the subcomponents of the 3 subcomponent in the figure above

<! -- This is the figure above3Part -- -- > <! -- This is a child of a child component --><template id="msgcontent">
        <div>
            <! -- Routing parameter -->This is the specific chat interface with the user {{index}}</div>
    </template>
Copy the code

4) Define vUE before instantiation

 const mymsg = {
        template: '#mymsg'
    }
    const msgcontent = {
        template: '#msgcontent'
    }
Copy the code
  1. Write router instantiated in routes
{
                    path:'/mymsg'.component:mymsg
                }
Copy the code

add a set of li displays 
<li>
      <router-link to='/mymsg'>My news</router-link>
 </li>
Copy the code

7) Current relationships and situations8) Add a little content mymsg

const mymsg = {
        template: '#mymsg'.data() {
            return {
                username: ' '}},created() {
            // The parent component passes information to the child component
            // This is the first type of value transfer.
            this.username = this.$route.query.username; }}Copy the code

9) If I write FHJ in this li first

<li>
     <router-link to="/mymsg? username='fhj'">My news</router-link>
  </li>
Copy the code

The page will display10) What needs to be done next isClick on the specific message after users 1-10 to display the msgContent11) Add the following routes

          {
                    path: '/mymsg'.component: mymsg,
                    // Nested routes inside
                    children: [
                        // The value of the route
                        {
                            path: 'msgcontent/:index'.component: msgcontent,
                      // If set to false, it cannot be toggled
                            props: true,}}]Copy the code

12) You need to define index in msgContent above

  const msgcontent = {
        template: '#msgcontent'.// The parent component passes values to the child component
        props: ['index']}Copy the code

4. Extended part of routing mode

1) Define two component templates

<template id="page1">
    <div>
        page1
    </div>
</template>
<template id="page2">
    <div>
        page2
    </div>
</template>
Copy the code
  1. Define the two components
const page1 = {
    template: '#page1',}const page2 = {
    template: '#page2',}Copy the code

3)Instantiate a Router.

 const router = new VueRouter({
     mode: 'hash'.routes: [{// Redirect to page1
             path: '/'.redirect: '/page1',},// The name of page1 is page1
         {
             path: '/page1'.component: page1,
             name: 'page1',},// page2's name is page2
         {
             path: '/page2'.component: page2,
             name: 'page2',}]});Copy the code
  1. The following isIn # app containerIn theUse it

Instead of using
this time, we’ll use a different way of routing jumps to programmatic navigation

<div id="app">
        <button @click="gotoPage('./page1')"></button>
        <button @click="gotoPage('./page2')"></button>
        <router-view></router-view>
    </div>
Copy the code
  1. Vue instancePut it in methods
methods: {
    gotoPage(path) {
        // Programmatic navigation
        this.$router.push(path)
    }
},
Copy the code
  1. Take a look at the implementation for a moment

If YOU click on page1, page1 appears and if you click on Page2, page2 appears

5. Route guard

First we mount an attribute on the vue prototype pointer, which records whether the user is logged in or not

 // Initially defined as false to indicate the unlogged state
   Vue.prototype.isLogn = false;
Copy the code

2) Then write the third component login and add a login click event

<template id="login">
    <div>
        <button @click="login">login</button>
    </div>
</template>
Copy the code

3) Then define this component and write a click event that changes the value of isLogin to true and returns to the previous page using this.$router.back

   / / define the login
    const login = {
        tempalte: '#login'.methods: {
            login() {
                Vue.prototype.isLogin = true.// Use the following return
                    this.$router.back()
            }
        }
    }
Copy the code
  1. thenConfiguring Routing Information
{
    path: '/login'.component: login,
    name: 'login'
},
Copy the code
  1. Used in the APP container
    <div id="app">
        <button @click="gotoPage('/page1')">page1</button>
        <button @click="gotoPage('/page2')">page2</button>
        <button @click="gotoPage('/login')">login</button>
        <router-view></router-view>
    </div>
Copy the code
  1. Implementation effect

7)After the router is instantiated, set the global guard

// Set the guard
    router.beforeEach((to,from,next) = >{})Copy the code
  1. Set the guardsSo let's update it to look like this
    // Set the guard
    // to go to the page
    router.beforeEach((to, from, next) = > {
        // The purpose is to go into the meta to isLogin to see if it is true
        if (to.matched.some(item= > item.meta.isLogin)) {
            if(! Vue.prototype.isLogin) { next({name: 'login'})}else {
                next();
            }
            // If there is no isLogin, jump directly
        } else{ next(); }})Copy the code

9) The effect is that you cannot view the page until you have logged in. Click login to view the page

Give yourself a thumbs up when you see this buy some fat water and be happy