路由的使用

路由的本质就是一组一组的键值对，可以根据路径渲染组件。

Vue的使用 一级路由

// 配置路由
export default new VueRouter({
  routes: [
      {
          path: "/about",
          component: About
      },
      {
          path: "/home",
          component: HomeH
      }
  ]

<router-link class="list-group-item" active-class="active" to="/about">Aboutrouter-link>
         <router-link class="list-group-item" active-class="active" to="/home">Homerouter-link>


 <div class="panel-body">
						
            <router-view>router-view>
          div>

to也可以使用对象写法方便传参

<router-link :to="{
	path:'/home/message/detail',
	query:{
		id:m.id,
		title:m.title
	}
}">
	{{m.title}}
router-link>

也可以根据名称去跳转, 命名路由见后文

<router-link class="list-group-item" active-class="active" :to="{name:'about'}">Aboutrouter-link>

active表示被激活后给标签添加类名。
注：

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。每个组件都有自己的$route属性，里面存储着自己的路由信息。整个应用只有一个router，可以通过组件的$router属性获取到。在切换路由的时候不使用的组件已经被销毁掉了。 嵌套路由

//创建并暴露一个路由器
export default new VueRouter({
routes: [
	{
		path: '/about',
		component: About
	},
	{
		path: '/home',
		component: Home,
		children: [
			{
				path: "news",
				component: News
			},
			{
				path: "message",
				component: Message
			}
		]
	}
]
})

<li>
<router-link class="list-group-item" active-class="active" to="/home/news">Newsrouter-link>
li>
<li>
<router-link class="list-group-item" active-class="active" to="/home/message">Messagerouter-link>
li>

命名路由

{
path: '/home',
component: Home,
children: [
	{
		path: 'news',
		component: News,
	},
	{
		path: 'message',
		component: Message,
		children: [
			{
				name : "detail",
				path: 'detail',
				component: Detail,
			}
		]
	}
]
}

使用：

<router-link
  :to="{
    name: 'detail',
    query: {
      id: m.id,
      title: m.title,
    },
  }"
>
  {{ m.title }}
router-link>

路由的props

路由配置

{
	name:'detail',
	path:'detail',
	component:Detail,

	//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
	// props:{id:1,title:'hello'}

	//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
	// props:true
	//props的第三种写法，值为函数,在这里可以把路由传递的参数通过pros传递给组件，这样使用的时候非常方便
	props($route){
		return {
			id:$route.query.id,
			title:$route.query.title,
			a:1,
			b:'hello'
		}
	}
}

我们在detail组件处接收

<script>
	export default {
		name:'Detail',
		props:['id','title'],
	}
script>

编程式路由导航

// push里需要传入一个对象，和申明式路由一样
this.$router.push({
name:'xiangqing',
query:{
	id:m.id,
	title:m.title
} 
}) // 会记录沿途路径，相当于一级一级压栈
this.$router.replace()  // 不会记录沿途路径
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

缓存路由组件

可以缓存路由的值，因为切换路由的之后，组件被销毁对应的数据也没用了。

<keep-alive :include="['News','Message']"> 

<keep-alive include="News">
<router-view>router-view>
keep-alive>

<keep-alive>
<router-view>router-view>
keep-alive>

路由组件独有新的生命周期钩子

activated() {
	// 组件被激活的时候触发
},
deactivated() {
	// 组件失活的时候触发
},
```

#### 路由守卫
配置在router index.js中
守卫路由的安全
- 全局路由守卫
```js
{
	name:'xiangqing',
	path:'detail',
	component:Detail,
	meta:{isAuth:true,title:'详情'},
}
//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
	console.log('前置路由守卫',to,from)
	if(to.meta.isAuth){ //判断是否需要鉴权，这个可以放到meta信息中
		if(localStorage.getItem('school')==='atguigu'){
			next()
		}else{
			alert('学校名不对，无权限查看！')
		}
	}else{
		next()
	}
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.meta.title || '硅谷系统'
})
export default router
```
- 独享路由守卫
一个组件单独有的
```js
{
	name:'xinwen',
	path:'news',
	component:News,
	meta:{isAuth:true,title:'新闻'},
	beforeEnter: (to, from, next) => {
		console.log('独享路由守卫',to,from)
		if(to.meta.isAuth){ //判断是否需要鉴权
			if(localStorage.getItem('school')==='atguigu'){
				next()
			}else{
				alert('学校名不对，无权限查看！')
			}
		}else{
			next()
		}
	}
}
```
注意：只有一个，没有afterenter
- 组件内的守卫
```js
<script>
export default {
	name:'About',
	//通过路由规则，进入该组件时被调用
	beforeRouteEnter (to, from, next) {
		console.log('About--beforeRouteEnter',to,from)
		if(to.meta.isAuth){ //判断是否需要鉴权
			if(localStorage.getItem('school')==='atguigu'){
				next()
			}else{
				alert('学校名不对，无权限查看！')
			}
		}else{
			next()
		}
	},
	//通过路由规则，离开该组件时被调用
	beforeRouteLeave (to, from, next) {
		console.log('About--beforeRouteLeave',to,from)
		next()
	}
}
</script>
```
### 路由的工作模式
hash 和 history
```js
const router =  new VueRouter({
	mode:'history', // 在创建实例的时候设置模式
	)}
```
如果使用history模式，我们点击路由只是路由的跳转不会发送网络请求，但是如果我们点击刷新就会按照这个路径去请求服务器，就会404。解决这个问题需要与后端配合或者使用代理服务器如Nginx。

注此文代码案例来源于尚硅谷视频教学。