一:路由是什么
- 路由就是路径和组件的映射关系。
- 在一个页面里, 切换业务场景
- 单页面 SPA(single page web application) 应用
- 整个应用只有一个完整的页面
- 点击页面中的导航链接不会刷新页面 ,只会做页面的局部更新
- 数据需要通过ajax请求获取
二:路由的基本使用方法
安装vue-router,命令 npm i vue-router (如果手动创建脚手架并勾选安装了router组件,则无需在安装)
应用插件:Vue.use(VueRouter)
router组件配置
<router-link to="/切换的路由的地址">
切换路由:跳转到指定路径的页面(router-link 在实际页面中会渲染成a标签)
例:<router-link :to="{'name':'about'}">关于</router-link>
<router-link :to="{path:'/product/123',query:{age:18},hash:'best'}">产品</router-link>
query可以传递需要的参数 ,hash表示哈希值
<router-view>
存放路由:通过router-link 的切换将router-view显示或隐藏,默认是被销毁掉的,需要的时候在挂载
router配置 /router/index.js
一般配置
{
path:"/user",
name:"user",
component:()=>import(xxx)
}
传参配置
{
path:"/product/:id",(这里的id与上文的123对应)
name:"product",
component:xxx
}
传参在页面中获取:$route.params.id特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!
如果想给未定义路由的页面配置一个页面
{
path:"*"
} 一定要配置在最后面
三:多级路由
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
// 二级路由
children:[
{
//这里不用加/
path:'news',
component:News,
},
{
//这里不用加/
path:'message',
component:Message,
}
]
}<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>要去的二级路由页面
四:编程式路由跳转 $router
- 前进 forward() go(1)
- 后退 go(-1) back()
- 切换路由 push("/about")
- 替换路由 replace("/about") (不留当前页面历史记录) 强制返回的话跳转到首页
自定义跳转的层级 $router.go(层数),前提是去往的页面存在