一、基本路由
1、基本使用
(1)安装vue-router,命令 npm i vue-router
(2)应用插件:Vue.use(VueRouter)
在main.js文件中修改:
import Vue from 'vue'
import App from './App.vue'
//引入插件
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)
new Vue({
router,
render: h => h(App),
}).$mount('#app')
(3)编写router配置项:
新建router文件夹:下面新建index.js文件
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import MyAbout from '../components/MyAbout'
import MyHome from '../components/MyHome'
//创建并暴露路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:MyAbout
},
{
path:'/home',
component:MyHome
}
]
})
4、实现切换(active-class可配置高亮样式)
<router-link class="list-group-item " active-class="active" to="/about">About</router-link>
5、指定展示位置
<router-view> </router-view>
二、几个注意点
1、路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹
2、通过切换,隐藏了的路由组件,默认是被销毁掉的,需要的时候再去挂载
3、每个组件都有自己的$route属性,里面存储着自己的路由信息
4、整个应用只有一个router,可以通过组件$router属性获取到
三、嵌套(多级)路由
1、配置路由规则,使用children配置项
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import MyAbout from '../components/MyAbout'
import MyHome from '../components/MyHome'
import MyNews from '../components/MyNews'
import MyMessages from '../components/MyMessages'
//创建并暴露路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:MyAbout
},
{
path:'/home',
component:MyHome,
children:[ //嵌套路由
{
path:'news', //不需要加斜杠
component:MyNews
},
{
path:'messages',
component:MyMessages
}
]
}
]
})
2、跳转(要写完整路径)
<router-link class="list-group-item active" to="/home/news">News</router-link>
完整代码
嵌套路由实现界面:
App.vue:
<template>
<div>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Vue Router Demo</h2></div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- 原始html中我们使用a标签实现页面的跳转 -->
<!-- <a class="list-group-item active" href="./about.html">About</a>
<a class="list-group-item" href="./home.html">Home</a> -->
<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link class="list-group-item " active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 此处到底展示什么组件,要看用户点击哪个导航项 -->
<!-- 指定组件的呈现位置 -->
<router-view> </router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
}
</script>
MyAbout.vue
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name: 'MyAbout'
}
</script>
MyHome.vue
<template>
<div>
<h2>Home组件内容</h2>
<div>
<ul class="nav nav-tabs">
<li>
<!-- 多级路由注意路径 -->
<router-link class="list-group-item active" to="/home/news">News</router-link>
</li>
<li>
<router-link class="list-group-item " to="/home/messages">Message</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'MyHome'
}
</script>
MyMessages.vue:
<template>
<div>
<ul>
<li>
<a href="/message1">message001</a>
</li>
<li>
<a href="/message2">message002</a>
</li>
<li>
<a href="/message/3">message003</a>
</li>
</ul>
</div>
</template>
<script >
export default {
name: "MyMessages",
}
</script>
MyNews.vue:
<template>
<ul>
<li>news001</li>
<li>news002</li>
<li>news003</li>
</ul>
</template>
<script >
export default {
name: "MyNews",
data() {
return {}
},
components: {},
methods: {}
}
</script>
<style >
</style>