Vue-router的使用,学习笔记

Vue-router的使用

基础

使用方法

• 导入Vue和VueRouter , 调用Vue.use(VueRouter)

• 导入页面罪组件、配置路由

• 在vue-router中, 页面会被渲染在"/"路径的router-view中 所以router-view标签是必不可少的

  import Vue from "vue"  // 引入vue
  import VueRouter from "vue-router";  // 引入vue-router
  import home from "../pages/home"  // 引入页面组件
  import favorite from "../pages/favorite"  // 引入页面组件
  
  Vue.use(VueRouter);
  // 创建路由配置
  const routes = [
      {
          path:"/",
          component:home
      },
      {
          path:"/favorite",
          component:favorite
      },
  ]
  // 实例化路由对象
  const router = new VueRouter({
      routes
  })
  // 实例化vue
  new Vue({
    router,
    render: h => h(App), // 为了渲染路由, 在App页面添加<router-view></router-view>标签
  }).$mount('#app')
  

  动态路由匹配（路由之间传参）

  使用“:”来传参

  // 配置
  const router = new VueRouter({
    routes: [
      // 动态路径参数 以冒号开头
      { path: '/user/:id', component: User }
    ]
  })
  // 传参跳转
   <p>
      <router-link to="/user/foo">/user/foo</router-link>
      <router-link to="/user/bar">/user/bar</router-link>
    </p>
  // 接收参数
  const User = {
    template: `<div>User {{ $route.params.id }}</div>`
  }
  

去除路径中的#号

mode说明
类型: string
默认值: “hash” (浏览器环境) | “abstract” (Node.js 环境)
可选值: “hash” | “history” | “abstract”
配置路由模式:
hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

new VueRouter({
	mode : "history"
    routes: ...
  })

• 当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

• 想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象

• 或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫

  // watch监测
  const User = {
    template: '...',
    watch: {
      $route(to, from) {
        // 对路由变化作出响应...
      }
    }
  }
  // beforeRouteUpdate 的方式
  const User = {
    template: '...',
    beforeRouteUpdate (to, from, next) {
      
    }
  }
  

以通配符的方法匹配路由

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分

如:

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

嵌套路由

简单来说就是在路由中包含另一个路由

const route = [{
    path:"/",
    component:TabBar,
    children:[
        {
            path:"", // 默认一进去就渲染这个页面
            component:home
        },
        {
            path:"favorite",
            component:favorite
        }
    ]
}]
// 记得router-view

跳转以及$router

• 最常规的跳转方式就是router-link标签进行跳转

• 另一种方式就是使用router.push 这个方法会在history栈中添加新纪录, 等同于router-link方式

• 该方法的用法

  // 字符串
  router.push('home')
  
  // 对象
  router.push({ path: 'home' })
  
  // 命名的路由
  router.push({ name: 'user', params: { userId: '123' }})
  
  // 带查询参数，变成 /register?plan=private
  router.push({ path: 'register', query: { plan: 'private' }})
  

router 的api

• push 就像上面说的一样
• replace 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录
• go 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步

路由命名, 很简单 就是一个name参数

• 在跳转的时候就可以使用name来跳转了

  this.$router.push("home");
  

const route = [{
    path:"/",
    component:TabBar,
    name:"root",  // 这就是路由命名
    children:[
        {
            path:"", // 默认一进去就渲染这个页面
            component:home
        },
        {
            path:"favorite",
            component:favorite
        }
    ]
}]

命名视图

• 当一个页面要显示多个同级视图,而不是嵌套视图的时候, 那么可以这样配置:

  const route = [{
      path:"/",
      components:{
          default:home, // 默认显示,
          a:favorite // name 为a的视图
      },
      name:"root",  
  }]
  

• 在使用的时候 需要在router-view标签中添加一个name属性

  <router-view></router-view>
  <router-view name="a"></router-view>
  

• 嵌套的命名视图和上面差不多, 在children中的component改为components, 和上面类似;

重定向和命名

• 重定向的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么“别名”又是什么呢？

  const routes = [
      {
          path:"/",
          component:home,
      },
      {
          path:"/favorite",
          component:favorite,
          redirect:"/"
      },
  ]
  

• /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。