Vue Routing Basics

Vue route

　　Feature is without re-requested pages, update page view;

First, the installation:

　　1）cnpm install vue-router -s

　　2 ) dependent: CNPM the install

Second, the design routing interface:

　　Create components folder, create separate user, Home Components folder

*user.vue*
<template>
<div>user</div>
</template>

* * Home.vue
<template>
<div>Home</div>
</template>

Third, create a static routing table:

　　In the creation routes.js the src

import Home from '@/components/Home.vue'
import User from '@/components/user/user.vue'
 
export const routes = [
        {path:'/',component:Home},
        {path:'/user',component:User}
]

Fourth, the introduction and use routing module:

　　In the introduction and use routing module main.js

Vue from Import 'VUE' 
Import from the App './App.vue' 
Import from VueRouter 'VUE-Router' // 1. routing module incorporated 
Import routes {} from './routes'         // 2. introduced into the static routing table 
 
Vue .use (VueRouter); // 3. use routing module 
// 4. Create a module instance VueRouter 
const = Router new new VueRouter ({ 

        routes:routes
});
 
new view ({
  on: '#app' ,
  router, // 5. The router instance placed in the vue instance 
  the render: H => H (the App)
})

Fifth, use the route:

　　In App.vue in:

<template>
  <div class="container">
                <div class="row">
                        <div class="col-xs-12 col-sm-8">
                                <h1>Routing</h1>
                                <router-view></router-view>
                        </div>
                </div>
        </div>
</template>

Sixth, the route to achieve the jump in two ways:

　　1 ) by html the <router-link to = "routing address"> tag:

<template>
  <div>
    <div>
      <span><router-link to="/home">首页</router-link></span>
      <span><router-link to="/products">商品</router-link></span>
    </div>
    <router-view></router-view>
  </div>
</template>

　　2 ) by js achieve:

this.$router.push("/Products/1");

　　　　// this point the problem: Use the arrow function;

RatingsPage.aspx .axios ({
    method: 'get',
    URL: '' 
.}) the then ( function (RESP) {
     // can not find the present assembly; 
    the console.log ( the this );
     the this $ router.push ( "/ Home." );
})
RatingsPage.aspx .axios ({
    method: 'get',
    url: ''
}).then((resp)=>{
    console.log(this);
    this.$router.push("/home");
})

Seven parameter passing:

　　1 ) Set parameters: router.js

export const routes = [
        {path:'/',component:Home},
        {path:'/user/:id',component:User}
]

　　2 ) pass parameters:

<router-link to="/products/123">商品</router-link>

　　3 ) reception parameters:

<script>
    export default {
      name: "products",
      data(){
          return{
            id:this.$route.params.id
          }
      }
    }
</script>

Guess you like