VueRouter笔记 - VueRouter基础

VueRouter

目录

• VueRouter
  • 1. VueRouter简介
    • 1.1 路由的基础实现步骤
    • 1.2 注意事项
  • 2. 嵌套路由
  • 3. 命名路由
  • 4. 重定向和别名
    • 4.1 重定向
    • 4.2 别名
  • 5. 编程式路由导航
    • 5.1 使用router中的API替换router-link
    • 5.2 replace和push属性
  • 6. History模式 和 Hash模式

1. VueRouter简介

• VueRouter主要用于实现单页应用，即，令组件映射到路由上，不需要通过页面跳转将组件渲染到页面上

  一个路由就是一组映射关系（key-value），key为路径，value为component

1.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
   

2. 在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')
   

3. 利用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>
   

4. 指定展示位置

   <!--在需要展示的位置指定路由出口-->
   <router-view></router-view>
   

1.2 注意事项

• 路由器存放在router文件夹，路由组件存放在pages文件夹，一般组件存放在components文件夹

• 通过切换"隐藏"了的路由组件，默认会被销毁掉，需要的时候再去挂载

• 每个组件都有自己的$route属性，里面存储着自己的路由信息

  但整个应用只有一个$router属性，里面存储着路由器的属性和方法

2. 嵌套路由

• 一些应用程序的 UI 由多层嵌套的组件组成，如果需要在父组件内实现子组件的单页面切换，此时就要使用嵌套路由

创建嵌套路由的步骤

1. 在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,
         },
       ],
     },
   ]
   

2. 在父组件中用<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的问题