Vue路由基础

Vue路由

　　功能就是在不重新请求页面的情况下，更新页面视图；

一、安装：

　　1）cnpm install vue-router -s

　　2）依赖：cnpm install

二、设计路由界面：

　　创建components文件夹，文件夹内分别创建user、Home组件

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

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

三、创建静态路由表：

　　在src下创建routes.js

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

四、引入路由模块并使用：

　　在main.js中引入路由模块并使用

import Vue from ‘vue‘
import App from ‘./App.vue‘
import VueRouter from ‘vue-router‘ //1.引入路由模块
import {routes} from ‘./routes‘        //2.引入静态路由表
 
Vue.use(VueRouter); //3.使用路由模块
 
//4.创建一个VueRouter模块的实例
const router = new VueRouter({
        routes:routes
});
 
new Vue({
  el: ‘#app‘,
  router,//5.把router实例放入到vue实例中
  render: h => h(App)
})

五、路由使用：

　　在App.vue中：

<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>

六、路由跳转实现两种方式：

　　1）通过html中的<router-link to="路由地址">标签实现：

<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）通过js实现：

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

　　　　//this指向问题：使用箭头函数；

this.axios({
    method: ‘get‘,
    url: ‘‘
}).then(function(resp){
    //无法找到本组件；
    console.log(this);
    this.$router.push("/home");
})
this.axios({
    method: ‘get‘,
    url: ‘‘
}).then((resp)=>{
    console.log(this);
    this.$router.push("/home");
})

七、参数传递：

　　1）设置参数：router.js

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

　　2）传递参数：

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

　　3）接收参数：

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

原文地址：https://www.cnblogs.com/Tractors/p/11100338.html