vue-router總結

this.$router 相當於一個全局的路由器對象，包含了很多屬性和對象（比如 history 對象），任何頁面都可以調用其 push(), replace(), go() 等方法。

this.$route 表示當前路由對象，每一個路由都會有一個 route 對象，是一個局部的對象，可以獲取對應的 name, path, params, query 等屬性。

路由激活    .router-link-active
常規參數只會匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路徑，我們可以使用通配符 (*) 比如404

帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
this.$route.query.userId

命名的路由
router.push({ name: 'user', params: { userId: '123' }})
this.$route.params.userId

注意：
1.命名路由搭配params，刷新頁面參數會丟失
2.查詢參數搭配query，刷新頁面數據不會丟失
3.接受參數使用this.$router後面就是搭配路由的名稱就能獲取到參數的值
4.query 參數拼接在url相當於get請求, 用戶可修改, params 類似post 用戶不可見
5.如果提供了 path，params 會被忽略，path和params不能同時存在

 

 

嵌套路由：在父級組件添加 <router-view/>
路由router.js添加children： 

routes: [
    {
      path: '/',
      // name: 'HelloWorld',
      component: HelloWorld,
      children:[
        {
          path:"/children",
          component:Children
        }
      ]
    }
  ]

 

動態路由

{ path: '/user/:id', component: User }

像 /user/foo 和 /user/bar 都將映射到相同的路由。

 

命名視圖

redirect重定向是當前匹配重新匹配          alias別名是當前的擁有多個匹配路徑

“重定向”的意思是，當用戶訪問 /a時，URL 將會被替換成 /b，然後匹配路由爲 /b

/a 的別名是 /b，意味着，當用戶訪問 /b 時，URL 會保持爲 /b，但是路由匹配則爲 /a，就像用戶訪問 /a 一樣。

重定向
const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })

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

甚至是一個方法，動態返回重定向目標： const router = new VueRouter({

routes: [ { path: '/a', redirect: to => {

// 方法接收 目標路由 作爲參數

// return 重定向的 字符串路徑/路徑對象

                                              }}

                             ] })

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



// vue-router
{ path: '/user/:id', component: User }

路由字符串

router.push('home')

路由對象

router.push({ path: 'home' })



$router : 是路由操作對象，只寫對象

$route : 路由信息對象，只讀對象

this.$router 實際上 就是全局 路由對象 任何頁面 都可以 調用 push(), go()等方法 跳轉前進後退

this.$route 表示當前正在用於跳轉的路由器對象，可以調用其name、path、query、params等屬性； 信息

 

 

vue-router路由守衛 

一、全局路由守衛
VueRouter.beforeEach(function (to, from, next) {
  const nextRoute = ['children', 'children', 'children'];
  //跳轉至上述3個頁面
  console.log(from.name)
  if (nextRoute.indexOf(to.name) >= 0) {
      //未登錄 判斷to的頁面需要登錄嗎
      if (localStorage.getItem('sessiontoken')){
        // console.log(to.name)
        next()
      }else{
        next({path:"/login"})
      }
  }
  //已登錄的情況再去登錄頁，跳轉至首頁
  if (to.name === 'login') {
      if (localStorage.getItem('sessiontoken')) {
          VueRouter.push({name: 'father'});
      }
  }
  next();
});

二、組件路由守衛
// 跟methods: {}等同級別書寫，組件路由守衛是寫在每個單獨的vue文件裏面的路由守衛
beforeRouteEnter (to, from, next) {
    // 注意，在路由進入之前，組件實例還未渲染，所以無法獲取this實例，只能通過vm來訪問組件實例
    next(vm => {})
}
beforeRouteUpdate (to, from, next) {
    // 同一頁面，刷新不同數據時調用，
}
beforeRouteLeave (to, from, next) {
    // 離開當前路由頁面時調用
}
三、路由獨享守衛
路由獨享守衛是在路由配置頁面單獨給路由配置的一個守衛

export default new VueRouter({
    routes: [
        {
            path: '/',
            name: 'home',
            component: 'Home',
            beforeEnter: (to, from, next) => {
               // ...
            }
        }
    ]
})