Human High quality VUE Learning Notes (iv)

1. The routing

When you think of routing, you might immediately think of your home router, which, yes, we all know is used to distribute the Internet. Routing is actually a correspondence relationship, for example, when we enter a url in the browser, the browser requests the resource corresponding to the URL.

The corresponding relationship between URL addresses and resources is routing.

Routing in VUE is like a router that can forward to different pages according to certain rules based on the user’s request path.

VueRouter is the official route manager provided by vue. js.

2. Quick use

2.1 Importing JS files

The key isvue-router.js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
Copy the code

2.2 Creating Components

Here we create two new components, user management and order management

const user = {
  template:' Welcome to user admin 
'
};

const order = {
  template:' Welcome to the order Management interface 
'
};
Copy the code

2.3 Creating a Routing Object and Configuring routing rules

Const newRouter = new VueRouter({routes:[{path:'/user',component:user},  
    {path:'/order',component:order}
  ]
});
Copy the code

path: Indicates the jump path.
component: The component corresponding to the path. In other words, the path is used to jump to the corresponding page.

2.4 Mounting a routing object to a VUE instance

router: newRouterTo mount a routing object to a VUE instance.

const app = new Vue({
  el: "#app",
  data: {
  },
  methods: {
  },
  router:newRouter 
});
Copy the code

2.5 Creating a Forward Link

Router-link can replace the A tag
To: indicates the forward path

<router-link to="/user" tag="button"> User Management </router-link> <router-linkto= "/order" tag="button"> </router-link>Copy the code

2.6 Creating Route Placeholders

router-view, the route placeholder, which is the page we want to jump toreplaceThis line of code.

<router-view></router-view>
Copy the code

2.7 Complete Code

 <divid="app"> <! --4Create router-link --> <router-linkto="/user" tag="button"> User Management </router-link> <router-linkto= "/order" tag="button"> </router-link> <hr> <! --5The route placeholder, which is the page we want to jump to, replaces this line of code --> <router-view></router-view> </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js>  const user = {template: ' Welcome to user management 
'}; Const order = {template: ' Welcome to the order management interface 
'}; Const newRouter = new VueRouter({routes: [{path: '/user', Component: user}, {path: '/order', component: order } ] }); Const app = new vue ({el: "); // 3.#app", data: {}, methods: {}, // mount router: newRouter}); Copy the code

Running results:

Click User Management:

Explanation: When clicking user management, routing will find the corresponding user component according to the “/user” path, and the content of the User component page will be replaced

shows “Welcome to the user management interface”.

3. Route redirection

Route redirection: Enter the page for the first time,The defaultJump to the component page.
Key words:redirect

const newRouter = new VueRouter({
      routes: [
          { path:'/',redirect:'/order'},
          { path: '/user', component: user },
          { path: '/order', component: order }
      ]
  });
Copy the code

Running results:

4. Set routine by

Nested routines: There are child routes below the route. To put it bluntly, click the parent menu to display the child menu. Click the child menu to display the corresponding page.

<div id="app">
    <router-link to="/user"> user management </router-link> <! --5The route placeholder, which is the page we want to jump to, replaces this line of code --> <router-view></router-view> </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"> user"> 
       
      /user/add"> add user  /user/update 
       
         #app", data: {}, methods: {}, // mount router: newRouter}); Copy the code

Running results:

4.1 The Page is Just Displayed

4.2 Click User Management

4.3 Click Add User

5. Route parameters are transmitted

5.1 the query mode

5.1.1 through? Concatenation parameter in sign form

<router-link to="/user? id=21"> </router-link>Copy the code

5.1.2 Obtaining Parameters from jump Components

const user = {
    template: '#user'.data() {
        return {
        }
    },
    created() {
        console.log("============="+this.$route.query.id);
    },
    methods: {},
}
Copy the code

5.1.3 Printed Results:

5.2 params way

5.2.1 Transferring Parameters Restful:

<router-link to="/user/21"> </router-link>Copy the code

5.2.2 Modifying a Route:

const newRouter = new VueRouter({
  routes:[
    {path:'/user/:id',component:user} // get corresponding parameters in path]});Copy the code

5.2.3 Obtaining Parameters from jump Components:

const user = {
    template: '#user'.data() {
        return {
        }
    },
    created() {
        console.log("============="+this.$route.params.id);
    },
    methods: {},
}
Copy the code

5.2.4 Printed Results:

6. Route redirection

This $router. Push (” path “);

6.1 Using THE JS Method to Go to the Page:

<div id="app">
    <router-link to="/user"> user management </router-link> <! --5The route placeholder, which is the page we want to jump to, replaces this line of code --> <router-view></router-view> </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"> user"> 
       
      /user/add"> add user  /user/update
       
         add
       
        < button@click ="
      toUserUpdate(a)   /user/update"); }}}; Const update = {template: ' welcome to 
'}; Const newRouter = new VueRouter({routes: [{path: '/user', component: user, // 3. [ { path: 'add', component: add }, { path: 'update', component: update }, ] }, ] }); Const app = new vue ({el: "); // 4.#app", data: {}, created() {}, methods: {}, router: newRouter}); Copy the code

6.2 Go to the User Add Page:

6.3 Click the button to go to the User editing page:

6.4 JS Route Redirects and transmits parameters

this.$router.push({ path:"/login",params: {id:123}}); this.$router.push({ path:"/login",query:{name:"Liu Huaqiang"}});Copy the code

7. Route navigation guard

Route navigation guard: acts as a gatekeeper. When you enter the login page: Release. When you want to visit another page without logging in: please return to the login page. When the navigator finds that you are not carrying token: please return to the login page.

router.beforeEach((to.from, next) => {// allow login if (to.path === '/login') {
    return next()
  }
  // 获取token
  const tokenStr = sessionStorage.getItem('token') if (! tokenStr) { return next('/login') } else { next() } })Copy the code

To indicates the path to be accessed
Where do you come from
Next is the next action to do, let go

Human High quality VUE Learning Notes (iv)

1. The routing

2. Quick use

2.1 Importing JS files

2.2 Creating Components

Welcome to user admin

Welcome to the order Management interface

2.3 Creating a Routing Object and Configuring routing rules

2.4 Mounting a routing object to a VUE instance

2.5 Creating a Forward Link

2.6 Creating Route Placeholders

2.7 Complete Code

Welcome to user management

Welcome to the order management interface

3. Route redirection

4. Set routine by

5. Route parameters are transmitted

5.1 the query mode

5.2 params way

6. Route redirection

< button@click ="

welcome to

7. Route navigation guard

Related Posts

Flattening in Javascript

Vue source diagram 01- in-depth analysis of the response principle

Simple – Qiankun handwriting micro front-end