vue-router

1. vue-router路由跳转

vue-router跳转页面有两种方法，一种是使用内置的 组件，另一种是使用router实例方法，也叫做编程式导航。

1. 内置的组件

<template>
  <div>
    <router-link>跳转到login页面</router-link>  
  </div>
</template>

它的用法跟一般组件用法是一致的，使用to来指定需要跳转的路径(默认会渲染成一个a标签), 当然也可以使用v-bind动态设置,另外还有一些其他属性。

• tag 可以指定渲染成什么标签，比如<router-linkto='login' tag='li'> 就会渲染成li标签 。
• replace 使用replace不会留下History记录，就是导航后不能用浏览器的后退键进行返回上一个页面，比如 <router-link to='login' replace>​
• active-class 当 对应的路由匹配成功后会自动给当前元素设置一个名为router-link-active的class，在做类似导航栏可以用到，选中的就设置高亮有背景颜色。

2. 编程式导航(路由传参)

如果在Js中在一个方法中想跳转页面则可以使用router实例进行跳转也就是这里说的编程式导航。

1. 使用router.push()方式

在vue实例中可以使用this.$router来访问路由实例，所以可以使用this.$router.push(), 使用push()方法就可以向history栈添加一条新的记录。

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

  this.$router.push('login'); // 字符串
  this.$router.push({path: 'login'});  // 对象
  this.$router.push({name: '自动保存'}); // 会跳转到name所对应的那个路由
  // 带查询参数，变成 /login?plan=private
  this.$router.push({ path: 'login', query: { plan: 'private' }})

如果想手写带有参数的路由

  const userId = '123';
  this.$router.push(`login\${userId}`);  // 解析成login/123
  this.$router.push({path: `login\${userId}`}); // 解析成login/123
  this.$router.push({name: 'user', params: {userId: userId}}); // 解析成login/123
  this.$router.push({name: 'user', query: {plan: userId}}); // 解析成 login?plan=123
  this.$router.push({path: 'login', query: {plan: userId}}); // 解析成 login?plan=123

这里需要注意的是当使用params时，只能与name使用，不能和path使用

params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应

params是路由的一部分必须在router.js中提前声明好，当匹配时成功则可以调转，路由有params参数若传参不对，页面变成空白，如果使用的是path,打印出当前的路由中的params则为空，图片如下


query相当于在当前的路由后面拼接的参数，比较简单

2. router.replace()

会替换当前的历史记录，不会添加到历史记录中。

3. router.go()

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

2. 路由重定向和别名

重定向

重定向通过routes来配置，直接跳转

 let router = new VueRouter({
    routes: [
        {path: '/a', redirect: '/b'}
    ]
 })

通过命名的方式

 let router = new VueRouter({
    routes: [
        {path: '/a', redirect: {name: 'user'}}
    ]
 })

通过方法，动态返回

let router = new VueRouter({
    routes: [
        {path: '/a', redirect: to => {
           // to 目标路由
        }}
    ]
 })

别名

重定向是指当用户访问’/a’,时url会变成’/b’,去匹配路由为’/b’的。

而别名是当访问’/a’时，url使用’/b’,进行展示但还是走的路由’/a’

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

3. 路由组件传值

在router.js中路由中配置props

let router = new VueRouter({
   let route = [
      {
        path: '/autoSave/:userId', 
        component: autoSave, 
        name: 'user', 
        menuShow: true, 
        props: true
      }
   ]
})
  

1. 布尔模式

当设置成布尔模式时，会把route.params设置成组件属性从props就可以获取到，图片如下

let router = new VueRouter({
   let route = [
      {
        path: '/autoSave/:userId', 
        component: autoSave, 
        name: 'user', 
        menuShow: true, 
        props: true
      }
   ]
})

2. 设置成对象

如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

let router = new VueRouter({
   let route = [
      {
        path: '/doctorDialog', 
        component: doctorDialog, 
        name: 'user', 
        menuShow: true, 
        props: {name: 121}
      }
   ]
})
  

3. 函数模式

通过参数route传入，将传入的值可以变化类型，然后返回props

function funProps(route) {
  console.log(route);
  let plan = route.query.plan;
  return {plan: plan}
}

let router = new VueRouter({
   let route = [
      {
        path: 'doctorDialog', 
        component: doctorDialog, 
        name: 'user', 
        menuShow: true, 
        props: funProps
      }
   ]
})

4. HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

这种情况需要后台配合支持