vue 路由vue-router

项目结构

1.下载路由  cnpn install   vue-router  -D 

2.在app.vue中创建  连接执行   tag 指定显示标签

<template>
    <ul>
        <router-link  tag="li" to="/home" >用户中心</router-link>
        <router-link  tag="li" to="/role">权限中心</router-link>
    </ul>
</template>

<router-view></router-view>

3.在components 中创建   点击路由显示的模块

4.创建路由配置文件爱你    router.config.js    引入显示的子模块     注意:::::routes   配置路径

import Home from './components/home.vue'
import Role from './components/role.vue'

export default {
    routes:[
        {
            path:'/home',component:Home
        },
        {
            path:'/role',component:Role
        },
        {
            path:'*',component:Home
        }
    ]
}

5.main.js中引入路由  vue-router 和  router.config.js   引入

import VueRouter from 'vue-router'
import routerConfig from './router.config.js'
Vue.use(VueRouter);
const router = new VueRouter(
    routerConfig
)
new Vue({
    mode:'history',
    router,
    el: '#app',
    render: (function (h) {
        return h(App);
    })
})