vur-router知识点总结

编程式导航

router.push

注意：在 Vue 实例内部，你可以通过 router.push。
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

// 字符串
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.replace

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.go(n)

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

命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

声明式导航router-link

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。
<router-link> 比起写死的 <a href="..."> 会好一些，理由如下：
无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。
在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。
当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径) 了。

to

• 类型：string | location
• required
  表示目标路由的连接，当被点击后，内部会立刻把值传到router.push()所以这个值可以是一个字符串或者是描述目标位置的对象

<router-link to='home'>home</router-link> //字符串
//渲染结果
<a href='home'>home</a>
//使用v-bind js表达式,也可以写简写 “:”
<router-link v-bind:to='home'>home</router-link> 
<router-link :to='{path:"home"}'>home</router-link>
//命名路由，routes中要有name，params 是参数
<router-link :to='{name:'user',params:{userId:132}}'>home</router-link>
//带查询参数，结果为/user?userId=132
<router-link :to='{path:'user',query:{userId:132}}'>home</router-link>

vue-router的params和query传参（接受参数），route, router区别

//query
传参: 
this.$router.push({
        path:'/xxx'
        query:{
          id:id
        }
      })
  
接收参数:
this.$route.query.id

//params
传参: 
this.$router.push({
        name:'xxx'
        params:{
          id:id
        }
      })
  
接收参数:
this.$route.params.id

注意：params传参，push里面只能是 name："XXX",不可以是 path："/XXX" ，因为params只能用来引入路由，如果这里写成了path，接受参数页面会是underfined！！！

另外，二者还有一点区别，query相当于get请求，页面跳转可以在地址栏看到请求参数，而params相当于post请求，参数不会在地址栏中显示

*注意：传参是，this.$route ,接受参数是 this.$route *

this. $route为当前router跳转对象，可以获取name，path，query，paramsdeng
this. $router为vuerouter实例

replace

• 类型：boolean
• 默认值：false
  设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。

<router-link v-bind:to='home' replace>home</router-link> 

append

• 类型：boolean
• 默认值：false
  设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b。

<router-link v-bind:to='home' append>home</router-link> 

tag

• 类型：string
• 默认值：'a'
  有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

<router-link v-bind:to='home' tag="li">home</router-link> 

active-class

• 类型：string
• 默认值：'router-link-active'
  设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

 new VueRouter ({
  mode:'hash', //默认hash模式，可以改为history模式
  base:'./',  //如果是history模式就可以不用写基础路径了
  routes:constantRoutes ,
  linkActiveClass:'is-active'
})

重定向

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})
//重定向的目标也可以是一个命名的路由：
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

别名

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么“别名”又是什么呢？
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
上面对应的路由配置为：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})
//重定向的目标也可以是一个命名的路由：
const router = new VueRouter({s
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

导航守卫

全局前置守卫

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫

你可以使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})
to: route:即将要进入得目标
form：当前导航正要离开的路由‘
next：function（）一定要调用该方法来resolve这个钩子，执行效果依赖next()方法调用参数
  *   **`next()`**: 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 **confirmed** (确认的)。

*   **`next(false)`**: 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 `from` 路由对应的地址。

*   **`next('/')` 或者 `next({ path: '/' })`**: 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 `next` 传递任意位置对象，且允许设置诸如 `replace: true`、`name: 'home'` 之类的选项以及任何用在 [`router-link` 的 `to` prop](https://router.vuejs.org/zh/api/#to) 或 [`router.push`](https://router.vuejs.org/zh/api/#router-push) 中的选项。

*   **`next(error)`**: (2.4.0+) 如果传入 `next` 的参数是一个 `Error` 实例，则导航会被终止且该错误会被传递给 [`router.onError()`](https://router.vuejs.org/zh/api/#router-onerror) 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved

登录验证

//main.js
router.beforeEach((to,from,next) => {
  if(to.meta.requireAuth){
    next()
  }else{
    next({
      path:'/login',
      query:{
        redirect:to.fullPath   
      } //将跳转得路由path作为参数，登录成功后跳转到该路由
    })
  }else{
    next()
  }
})