基本使用
1. 安装vue-router,命令:
npm i vue-router
2. 应用插件
import VueRouter from 'vue-router;
Vue.use(VueRouter)
3. 编写router配置项
import VueRouter from 'vue-router'
import About from '../components/About.vue';
import Home from '../components/Home.vue';
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:"/home",
component:Home
}
]
})
4. 实现切换(active-class可配置高亮样式)
<router-link active-class="active" to="/about">About</router-link>
5. 指定显示位置
<router-view></router-view>
注意点
1. 路由组件通常放在pages文件夹下,一般组件通常放在components文件夹下
2. 通过切换,隐藏了的路由组件默认是被销毁了的,需要的时候再去挂载.
3. 每个组件都有自己的$orute属性,里面存储着自己的路由信息.
4. 整个应用只有一个router,可以通过组件的$router属性获取到