// 目标：vue-router基本使用
//引入
import VueRouter from 'vue-router'
//注册全局组件
Vue.use(VueRouter)
//规则数组
const routes=[{ ? ?//最好写为routes 
? ? path:"/find",
? ? component:Find,
? ? },{
? ? ? ? path:"/my",
? ? ? ? component:MY,
? ? },{
? ? ? ? path:"/part",
? ? ? ? component:PART,
? ? }
]
//生成路由对象
const router=new VueRouter({
? ? //routes:routes ? ?//简写为下面形式
? ? routes ? ? ?//routes是固定的（传入规则数组） ?
})
//路由对象注入到vue实例中，this可以访问$route和$router
new Vue({
? ? router,
? ? render:h=>h(App),
}).$mount('#app')

@表示src的绝对路径

声明式导航

可用组件router-link来替代a标签

①vue-router提供了一个全局组件router-link

②router-link实质上最终会渲染成a链接to属性等价于提供href属性（to无需#）

③router-link提供了声明式导航高亮的功能（自带类名）

声明式导航-----跳转形参

在跳转路由时，可以给路由对应的组件内传值

在router-link上的to属性传值 ???

第一种： /path?参数名=值

第二种：/path/值 ??需要路由提前配置 path: “/path/:参数名1/:参数名2”

对应页面组件接收传递过来的值

第一种对应：$route.query.参数名

第二种对应：$route.params.参数名

路由重定向

匹配路径后，强制跳转path路径

网页打开url默认hash值是/路径

redirect是设置要定向到哪个路由地址

路由404设置

找不到路径给提示页面

在路由最后面 path匹配*（任意路径）---前面不匹配命中最后这个

切换路由模式

修改路由在地址栏的模式

hash路由例如：http://localhost:8080/#/home

history路由例如：http://localhost:8080/home(以后上线需要服务端支持，否则找的是文件夹）

在main.js中的实例化路由对象代码部分加入 ??mode: ”history”??// 默认不写是hash路径

编程式导航----基础使用

用js代码来进行路由跳转

使用path或name

this.$router.push({
? ? //path或者name任选一个，都在router/index.js定义
? ? // path:"路由路径",
? ? name:"路由名", //要在main.js规则部分每个路径加上name属性，虽然用name跳转，但是url上面路径切换path路径值
})

js跳转路由，传参

使用query或params

this.$router.push({
? ? //query或者params任选一个
? ? // path:"路由路径",
? ? name:"路由名", 
? ? query:{
? ? ? ? "参数名1":值1 ? ?//使用$route.query.参数名
? ? },
? ? // params:{
? ? // ? ? "参数名2":值2 ? ? ?//使用$route.params.参数名
? ? // }
})
//使用path方式 会忽略params，所以不可以和params一起使用
//使用name方式 query和params都可以使用 
//推荐name+query

路由嵌套

在现有的一级路由下，再嵌套二级路由

一级路由path从/开始定义

二级路由path直接写名字，无需/开头

嵌套路由在上级路由的children数组里编写路由信息对象

类名区别

观察路由嵌套导航的样式

router-link-exact-active（精确匹配）url中的hash值路径，与href属性值完全相同，设置此类名

router-link-active（模糊匹配）url中的hash值，包含href属性值这个路径

路由守卫

全局前置守卫

路由跳转之前，会触发一个函数

router.beforeEach((to,from,next)=>{})

例如：

let isLogin=false;//未登录
router.beforeEach((to,from,next)=>{ 
? ? //to表示要跳转的路由（路由对象信息） 目标
? ? // from表示从哪里跳转到路由（路由对象信息）来源
? ? //函数体 next()才会让路由正常的跳转切换，next(false)在原地停留，next("强制修改到另一个路由路径上")
? ? //注意：如果不调用next,也买你停在原地
? ? if(to.path==='/my'&&isLogin===false){ ?//如果要去我的音乐页面而且没有登录
? ? ? ? alert("请登录")
? ? ? ? next(false) //阻止路由跳转
? ? }else{
? ? ? ? next() //正常放行
? ? }
})