Vue 路由:一级路由，嵌套路由

1、安装路由插件,因为用的是vue2 所以路由版本要和vue2对应上，所有有@3

yarn add vue-router@3

2、在main.js里引入

import VueRouter from 'vue-router'

Vue.use(VueRouter)

3、新建文件夹 router,创建index.js

4、引入路由插件，并且暴露出来这个路由

5、在main.js引入这个路由，

 6、保存后，查看项目访问路基是有出现了#，如果是则路由器开始工作了

7、在页面里，开始写路由链接，并且展示不同的内容，其中to="/aaa"是路径，active-class="active"是选中后的颜色标识

<router-link to="/aaa" active-class="active">啊啊啊啊啊</router-link>

<router-link to="/bbb" active-class="active">啊啊啊啊啊</router-link>

<!------------展示路由的页面组件------>

<router-view></router-view>

 

8、嵌套路由是写在一级路由下面的children里面，注意其中路由要写全路径 ,也可以用name指定名称来跳转

// 该文件用于创建整个应用的路由器
import VueRouter from "vue-router";//引入组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import Detail from '../pages/Detail.vue'//创建一个路由器,并且暴露出来
export default new VueRouter({routes: [{path: '/aaa',component: About,children: [{path: 'nnn',component: News}]},{path: '/bbb',component: Home,children: [{path: 'message',component: Message,children: [{name: 'xiangqing',path: 'detail',component: Detail}]}]},]
})

 <router-link :to="{name:'xiangqing'}"> {{ m.title }}</router-link>