vue-router使用说明

安装vue-router包 npm install  vue-router --save

1  router.js

import Vue from 'vue';

import VueRouter from 'vue-router

Vue.use(VueRouter)；

const router = new VueRouter({

    routes: [

        {path: '/cart', component: Cart}, 配置路径

        {path: "/", redirect: '/cart'} 重定向

    ]

})

export default router;

 

2 将router插入到根实例main.js

import router from './router.js'

new Vue({

    router,

    render: h => h(App)

}).$mount('#app')

 

3  页面使用

路由跳转 <router-link to=""></router-link>

       <router-link :to="'/home/'+ name"></router-link>  name是变量

路由显示 <router-view></router-view>

 

4 动态路由

router.js routes设置配置：{path: "/user/:id", component: User}

User组件

<router-link to="/user/123">123</router-link>

<router-link to="/user/456>456</router-link>

<router-view></router-view>

组件内获取动态id:  this.$route.params.id

 

5 嵌套路由

router.js routes设置配置：

{

    path: "/home",

    component: Home,

    children: [

        {path: "", component: Phone},

        {path: "phone", component: Phone},

        {path: "computer", component: Computer}

    ]

}

Home.vue里也有 <router-view></router-view>来展示嵌套的路由
以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;
在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。

6 命名路由

router.js routes设置配置

{
                path: "/user/:id",
                name: "user",
                component: user
         }

        <router-link :to={name: "user", params:{userId: 123}}> 注意是  :to=""

7 组件内动态路由跳转

this.$router.push("/home")

动态跳转传参  this.$router.push({path:"/home", query:id: 1}})