一: 使用路由
引入组件
配置路由
创建路由实例
创建Vue实例,挂载路由
二: 两个标签
(1) <router-view />
路由出口
路由匹配到的组件将渲染在这里
(2)<route-link to/>
使用 router-link 组件来导航.,通过传入 to
属性指定链接 ,<router-link> 默认会被渲染成一个 <a>
标签
三: 两个属性
this.$router 全局路由对象,用来跳转
this.$route 当前页面路由信息
四:路由操作Api
路由跳转
(1) 通过路径跳转
this.$router.push({path:'/message', query:{x:1,y:2}}) (query传参显示)
(2)通过路由name跳转
this.$router.push({name:'Shopping', params:{a:3,b:4}}); (params传参隐藏)
路由回退 back() 回到上一页
路由前进 forward() 去往下一页
路由替换并不加入历史记录 replace()
路由任意跳转 go(index),去到相对当前页面的index页面
五:嵌套路由
声明在路由的children属性里,并在组件中添加router-view标签
命名路由
配置路由的时候增加name属性,可以通过push({name, params})的方式跳转
动态匹配路由
型如:/index/:id?,通过this.$route.params.id获取,?表示id参数可传可不传
六: 路由懒加载