Vue-Routes

下载

npm i vue-router@x   x为版本号   版本对应规则: vue@x == router@x+1

使用

一、创建应用路由器

在src中创建router/index.js目录

1、引入touter插件&&应用插件

import VueRouter from 'vue-touter'
Vue.use(VueRouter)

2、 将需要做局部页面跳转的组件引入

import Home from '../components/Home'
import User from '../components/User'

3、将路由组件与路由进行映射

(path -> component) == (key -> value)映射 每一个路径对应着一个组件

const routes=[
    {  //一级路由
        path:'/',      //  路径为/时就展现Main组件
        component: Main, //组件名
        children:[            //二级路由
            {
                path:'home',     // 路径为/home时就展现Home组件  子路径不用写/   
                component:Home  //  组件名
                // children   //三级路由  子路由可以一直写下去 
            },  
            
            {
                path:'user',   //路径为/user时就展现User组件
                component:User
            },
        ]
    },
    
    {    //一级路由
        ...
    }
]

4、创建router实例&&传入routes配置&&对外输出本模块变量的接口

export default VueRouter({ 
    router
})

二、将router挂载到根节点

位置: main.js

import router from './router'
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

三、 配置路由出口 将路由匹配到的组件渲染在此处

<router-view></router-view>