vueルーティングとルーティングガード

ルーティングの追加

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Detail from '../views/Detail.vue'
Vue.use(VueRouter)
  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/detail',
    name: 'Detail',
    component: Detail
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]
const router = new VueRouter({
  routes
})
export default router

ルーティングジャンプによるルーティングジャンプで表示
ルーティングリダイレクト
redirectによるルーティングのリダイレクト

  {
    path: '/',
    name: 'Home',
    component: Home,
    redirect:'/detail'
  },
  {
    path: '/detail',
    name: 'Detail',
    component: Detail,
    
  },

サブルートの定義

 {
    path: '/detail',
    name: 'Detail',
    component: Detail,
    children:[
    	{
    	 	path: 'info',
    	 	// "/"              ，         "/";
    	 	 name: 'Info',
    		component: Info,
    	},
    ]
  },

ルーティングパラメータ

$router.pushを用いる携帯パラメータジャンプ

を実現する.

は、this.$route.params.idを使用してパラメータ

を取得することができる.

getDetail(id) {
        this.$router.push({
          path: `/detail/${id}`,
        })

ルーティング構成

{
     path: '/detail/:id',
     name: 'Detail',
     component: Detail
   }

はname値によってルーティングを決定し、paramsによって

を伝達する.

this.$router.push({
          name: 'Detail',
          params: {id: id}
        })

はpathマッチングルーティングによりqueryにより伝達する

である.

this.$router.push({
          path: '/Detail',
          query: {
            id: id
          }
        })

ルーティングガード

router.beforeEach((to, from, next) => {
  //to      , from     , next        ，    ，  next() 
  console.log(to);
  if (to.path !== '/login') {
      if (window.isLogin) {
          next()
      } else {
          next('/login?redirect='+ to.path)
      }
  } else {
      next()
  }
})