目录
一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。
前端路由:key是路径,value是组件。
1.基本使用
安装vue-router,命令:npm i vue-router
(1). 应用插件:
Vue.use(VueRouter)
(2). 编写router配置项:
新创建的router文件夹的index.js中
//在新创建的router文件夹中
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由 组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象,去管理一组一组的路由规则
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
//暴露router
export default router
```
(3). 实现切换
(active-class可配置高亮样式)
App组件中
<router-link active-class="active" to="/about">About</router-link>
(4). 指定展示位置
(与插槽类似)
App组件中
<router-view></router-view>
(5).注意
- 路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹。
-通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。
-每个组件都有自己的$route属性,里面存储着自己的路由信息。
-整个应用只有一个router,可以通过组件的$router属性获取到。
2.嵌套路由(多级路由)
(1)路由的配置规则:使用children,配置项在router文件夹下面的js文件中配置
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[ //通过children配置子级路由
{
path:'news', //此处一定不要写:/news
component:News
},
{
path:'message',//此处一定不要写:/message
component:Message
}
]
}
]