16router-link配置

router-link配置

   <router-link></router-link>

   一》to:
      1》to='/home'
      2》:to='"/home"'
      3》:to='{path:"/home"}'
      4》:to='{
               path:"/home",
               query:{userId:123}
            }'
      5》:to="{ 
               name: 'user', 
               params: { userId: 123 }
            }"

      ***補充，如何經過js方式進行跳轉

      # router.push
      # router.replace
      # router.go
      # router.back
      # router.forward

   二》tag：默認爲a標記，能夠修改

      tag='li'
      tag='button'

   3、router-link-active：默認觸發的class類

****
官網：https://router.vuejs.org/api/#to

17router-view

keep-alive:
		1》是什麼？
			vue內置的組件，能在組件切換過程當中將狀態保存在內存中，防止dom重複渲染
		2》使用場景
			把頁面保存在內存中，記住輸入的內容等操做

		3》使用
			
			<keep-alive>
				<router-view></router-view>
			</keep-alive>
		
		需求：有的頁面須要保存，有的不須要

			 include : 包含哪一個（name）
			 exclude ：不包含哪一個？(name)

<template>
  <div>
      <router-link to='/a' tag='button'>
        AAAA
      </router-link>

      <router-link to='/b' tag='button'>
        BBBB
      </router-link>

      <keep-alive include='ccc,ddd'>//組件的name
        <router-view></router-view>
      </keep-alive>

  </div>
</template>

18router.js配置

1、說明

{
  path: '/',      //路徑
  name: 'home',   //名稱:基本上作標識或者判斷
  component: Home //對應訪問的組件
}

2、懶加載

{
  path: '/about',
  name: 'about',
  component: () => import('./views/About.vue')
}

3、路由重定向

{ 
  path: '*', 
  redirect: Home
}

4、路由嵌套

{
  path: '/about',
  name: 'about',
  component: () => import('./views/About.vue'),
  children:[
      {
        path:"/xxx:id",
        component:Home
      },
      {
        path:"/xxx",
        component:Home
      }
  ]
}

19路由傳值

1》this.$router

2》this.$route
   1》
      {
         path: '/about/:id',
         name: 'about',
         component: () => import('./views/About.vue')
       }
   2》
      <router-link :to="{path:'/about',query:{
        aaa:123
       }}">About</router-link>