路由

跳转页面和路由模式

vue的路由

1. 路由的文档
   https://v3.router.vuejs.org/zh/api/
2. 路由是干什么的 ==》 就是来负责跳转页面...反正是和页面打交道的
3. vue + router是单页面应用（SPA）
   解释一下“什么是”单页面 ：整个项目==》只有一个html文件
   缺点：不合适做SEO
   目前来说：后台管理系统非常适合Vue这个框架来做

跳转页面

1. template
   跳转到课程页
2. js
   

router.push ==》从A进入到B，也可以从B返回到A
this.$router.push('/course')
router.replace ==》从A进入到B，不可以再返回了
this.$router.replace('/course')
router.go ==》go(-1)、go(0)，返回、前进、刷新
router.back ==》返回上一页

路由的模式

1. history模式

        const router = new VueRouter({
		  mode: 'history',
		  base: process.env.BASE_URL,
		  routes
		})

2. hash模式

		const router = new VueRouter({
		  mode: 'hash',
		  base: process.env.BASE_URL,
		  routes
		})

3. 两种路由的区别

• 关于找不到路由的情况
  history : 会发送一次get请求
  hash : 不会额外发送一次get请求
• 路由展示的形式不一样
  hash : 带了一个#
  history的颜值比hash高

router link和router view

router-link

1. router-link 写在template部分的，用来跳转页面的
   写法：(html中)

2. router-link的更多参数

• to ==> 表示目标路由的链接(跳转到的页面)
  前两个是直接通过链接,最后一个是通过name的

<router-link to='/course'></router-link>
<router-link :to='{ path:"/vip" }'>跳转到vip</router-link>
<router-link :to='{ name:"course" }'>跳转到课程页</router-link>

• tag ==> 可以渲染成任意标签
  ***默认不配置是a链接

• replace ==> 不能返回上一页和this.$router.replace一样
  

router-view

<router-view> 渲染路径匹配到的视图组件。
会根据导航页面的一些操作来进行页面的渲染

子路由和动态路由

路由懒加载分包 : webpackChunkName: "course"

	const routes = [
	  {
	    path: '/',
	    name: 'home',
	    component: Home
	  },
	  {
	    path: '/course',
	    name: 'course',
	    component: () => import(/* webpackChunkName: "course" */ '../views/Course.vue')
	  },
	  {
	    path: '/vip',
	    name: 'vip',
	    component: () => import(/* webpackChunkName: "vip" */ '../views/Vip.vue')
	  }
	]

配置404页面

	const routes = [
	  {
	    path: '/',
	    name: 'home',
	    component: Home
	  },
	  {
	    path:'*',
	    component:Redirect
	  }
	]

子路由 ： 项目不一定需要，但是子路由方便管理...等等

	{
	    path: '/search',
	    name: 'search',
	    children:[
	      {
	        path:'/',
	        name:'searchIndex',
	        component:() => import('../components/search/Search-Index')
	      },
	      {
	        path:'/search/list',
	        name:'searchList',
	        component:() => import('../components/search/Search-List')
	      }
	    ],
	    component: () => import(/* webpackChunkName: "search" */ '../views/Search.vue')
	},

动态路由

	{
	    path:"/news",
	    name:'news',
	    children:[
	      {
	        path:'/news/:id',
	        name:'newsId',
	        component:()=> import('../components/news/NewsDetail.vue')
	      }
	    ],
	    component:() => import('../views/News.vue')
	},

导航守卫

什么是路由导航守卫

1. 通俗解释：就是保安大哥，ok的情况可以进入，不ok进入不了
2. 场景：进入某一个页面，前置性需要判断身份（是否登录）。如果登录可以进入，如果没有登录不可以进入（跳转到登录页）。

全局导航守卫

• beforeEach
• beforeResolve
• afterEach

路由独享导航守卫

	beforeEnter:(to,from,next)=>{

      if( false ){//这里的判断条件就是当前用户是否是登录状态
        next();
      }else{
        next('/login');
      }
      //to //去哪的路由对象
      //from //当前路由对象
      //next('/login') //跳转到对应的页面
      //next();//ok符合身份

    },

组件内导航守卫

直接写在组件的js文件中(不推荐,不利于维护)

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave