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>