VueRouter
目录1. VueRouter简介
-
VueRouter主要用于实现单页应用，即，令组件映射到路由上，不需要通过页面跳转将组件渲染到页面上
一个路由就是一组映射关系（key-value），key为路径，value为component
1.1 路由的基础实现步骤
-
编写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 -
在main.js中挂载router
import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' import router from './router' Vue.use(VueRouter) new Vue({ render: h => h(App), router }).$mount('#app') -
利用router-link实现切换
<!--to指定链接，active-class用于配置高亮样式--> <router-link active-class="active" to="/about">About</router-link> <router-link active-class="active" to="/home">Home</router-link> -
指定展示位置
<!--在需要展示的位置指定路由出口--> <router-view></router-view>
1.2 注意事项
-
路由器存放在router文件夹，路由组件存放在pages文件夹，一般组件存放在components文件夹
-
通过切换"隐藏"了的路由组件，默认会被销毁掉，需要的时候再去挂载
-
每个组件都有自己的
$route属性，里面存储着自己的路由信息但整个应用只有一个
$router属性，里面存储着路由器的属性和方法
2. 嵌套路由
- 一些应用程序的 UI 由多层嵌套的组件组成，如果需要在父组件内实现子组件的单页面切换，此时就要使用嵌套路由
创建嵌套路由的步骤
-
在router中添加children
const routes = [ { path: '/user', component: User, children: [ { // 当 /user/news 匹配成功 // News组件 将被渲染到 User 的 <router-view> 内部 path: 'news', component: News, }, { // 当 /user/message 匹配成功 // Message组件 将被渲染到 User 的 <router-view> 内部 path: 'message', component: Message, }, ], }, ] -
在父组件中用
<router-view></router-view>指定子组件的路由出口
3. 命名路由
-
命名路由可以简化路由的跳转
添加name属性
const routes = [ { path: '/user', component: User, children: [ { name: 'userNews' path: 'news', component: News, }, ], }, ]简化后的router-link
<!--简化前--> <router-link to="/user/message"> Message </router-link> <!--简化后(必须写成对象形式且绑定)--> <router-link :to="{name:'userNews'}"> Message </router-link>
4. 重定向和别名
4.1 重定向
-
重定向也是通过
routes配置来完成，下面例子是从/a重定向到/b：const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })当然也支持其它写法
const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] })注意：导航守卫只会对重定向后的路由目标生效，对于原路由不会生效。（比如此处
/a的路由守卫不会生效，/b或foo的会）
4.2 别名
-
别名和重定向有点类似，但是，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样
const router = new VueRouter({ routes: [ { path: '/a', component: A, alias: '/b' } ] })
5. 编程式路由导航
- 简单来说，编程式路由导航就是不借助router-link实现路由
5.1 使用router中的API替换router-link
-
想要导航到不同的 URL，可以使用
router.push方法，该方法也同router-link一样支持三种传参方式注意，与router-link可以直接作为标签写入html不同，router需要设置触发条件，然后写入到methods中作为方法被调用。这样的好处就是路由的跳转不在局限于a标签，而是可以添加到各种各样的标签中
<script> export default{ name:'Detail', methods:{ pushShow(){ //直接跳转到home页面 this.$router.push('/home') // 对象表示法，使用命名的路由 this.$router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数，变成 /register?plan=private this.$router.push({ path: 'register', query: { plan: 'private' }}) } } } </script>
5.2 replace和push属性
-
游览器的历史记录有两种写入方式：
push和replace，它们可以控制路由跳转时操作历史记录的模式push是追加历史记录，类似于栈，点击回退键会回到上一个页面；replace是替换当前记录，会直接替代上一个页面的记录，点击回退键会直接返回首页或最近一次使用push的页面。路由跳转时默认为push
-
在router-link中开启replace模式
<!--开启replace模式--> <router-link replace to="/user"> 跳转 </router-link> -
以router API形式使用replace模式
pushShow(){ this.$router.replace({ path: 'register', query: { plan: 'private' }}) } -
除了push和replace，router还提供了
forward()、back()、go()方法，其中go方法可以前进或后退指定数量的页面this.$router.forward() //前进1页 this.$router.back() //后退1页 this.$router.go(-1) //后退2页 this.$router.go(3) //前进3页
6. History模式 和 Hash模式
- 对于一个url来说，
#及其后面的内容就是hash值 - hash值不会包含在HTTP请求中，即hash值不会带给服务器
- hash模式：
- 地址中带有
#号 - 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
- 地址中带有
- history模式：
- 地址中不带有
#号 - 兼容性和hash模式相比略差
- 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题
- 地址中不带有