【vue】------ 路由创建 ------ 【William】

path：路由请求的路径component：路由匹配成功后需要渲染的组件或者页面tag:改变组件内部渲染的元素 假设组件内部渲染的是a标签 tag="li" 那么li就会替换aimport Router from 'vue-router'
import Home from "./views/Home.vue";
import List from "./views/list.vue";
Vue.use(Router)//路由的配置项
export default new Router({
//每一个路由的配置项,每一个路由都是一个对象
routes: [
{
//请求的路径 pathname
path:"/home",
//path路径匹配成功后渲染哪个组件/页面
component:Home
},
{
path:"/list",
component:List
}
]
})

1、<a href="#/home"></a>2、<router-link to="/home"></router-link>to的路径会与path进行匹配，如果匹配成功会渲染component对应的组件组件怎样才能在页面上进行展示：
必须依赖一个内置组件
<router-view></router-view> //展示路径匹配成功以后相对应的组件3、直接调用$router.push 实现携带参数的跳转
getDescribe(id){
this.$router.push({
path:'/describe/${id}',
})
}

redirect：重定向 （当访问一个路径时想展示另一个路径的页面）{
path:"/",
redirect:"/home"
}

children：路由嵌套 children是一个数组 数组里存放对象 每一个对象都是下一级的路由的配置项 配置项的属性与routes里面的属性一样name:命名路由 给当前路由取一个别名children:[
{
name:"city",
path:"city",
component:City
}
]

路由传参：
tip: 用params传参，F5强制刷新参数会被清空，用query，由于参数适用路径传参的所以F5强制刷新也不会被清空。路由的传参接收方式统一在this.$route里面1、query传值接收方式query传值?后面的参数 &进行链接 /user?name=zhangsan&age=18传值的方式：通过?进行数据的拼接 每个字段之间用&分隔 类似与get请求的方式
接收:this.$route.queryrouter.js页面：
{
name:"detail",
path:"/detail",
component:Detail,
}传递参数地址页面：
//query传值接收方式
let {id,name} = this.$route.query;
this.id = id;
this.name = name;所要跳转的路径：1、
<div class="app">
<ul>
<Router-link
v-for="(item,index) in goods"
:to="'/detail?id='+item.id+'&name='+item.goodsName"
tag="li"
> <h2>{{item.goodsName}}</h2>
</Router-link>
</ul>
<router-view></router-view>
</div>2、
<div class="app">
<ul>
<Router-link
v-for="(item,index) in goods"
:to="{name:'detail',query:{id:item.id,name:item.goodsName}}"
tag="li"
> <h2>{{item.goodsName}}</h2>
</Router-link>
</ul>
<router-view></router-view>
</div>2、动态路径接收方式
params:参数不会显示到路径上在路由的配置项path中，设定传递参数的属性 方式为 /:属性.....
在路由跳转的属性中 设置属性的值 方式为 /detail/0/苹果接收：this.$route.paramsrouter.js页面：
{
name:"detail",
path:"/detail/:id/:name",
component:Detail,
}传递参数地址页面：
//动态路径接收方式
let {id,name} = this.$route.params;
this.id = id;
this.name = name; 所要跳转的路径：
1、
<div class="app">
<ul>
<Router-link
v-for="(item,index) in goods"
:to="'/detail/'+item.id+'/'+item.goodsName"
tag="li">
<h2>{{item.goodsName}}</h2>
</Router-link>
</ul>
<router-view></router-view>
</div>2、
<div class="app"><ul>
<Router-link
v-for="(item,index) in goods"
:to="{name:'detail',params:{id:item.id+'',name:item.goodsName}}"
tag="li">
<h2>{{item.goodsName}}</h2>
</Router-link>
</ul>
<router-view></router-view>
</div>3、props接收方法router.js页面：
{
name:"detail",
path:"/detail/:id/:name",
component:Detail,
props:true,
}传递参数地址页面：
props:{
id:{
type:String,
default:""
},
name:{
type:String,
default:""
}
},

query传值是非必须传值 动态路由传值是必须要传值

beforRouteEnter 路由进入之前
1、热力图
2、登陆验证
3、权限验证
4、会员 VIP验证
5、验证商品携带信息是否完整在当前钩子函数中是访问不到this的，因为还没有进入当前组件所以this为undefined
如果需要使用this则需要在next中使用回调,回调中的第一个参数就是组件的实例进入路由之前
props:{
id:{
type:String,
default:""
},
name:{
type:String,
default:""
}
}beforeRouteEnter(to,from,next){//to 到哪里去 from 从哪来 next执行下一步
document.title = to.meta.titlenext((vm)=>{console.log(vm);});
},beforRouteUpdate 路由更新的时候当路由发生了改变，但是当前组件没有经历创建和销毁的时候，如果我们需要接收路由传递过来的数据时
我们就需要用到了beforRouteUpdateprops:{
id:{
type:String,
default:""
},
name:{
type:String,
default:""
}
}beforeRouteUpdate (to,from,next) {
//当路由发生改变的时候
console.log("执行了") this.id = to.params.id; this.name = to.params.name; next();
}beforRouteLeave 路由离开的时候
1、信息没有填写完成
2、答题系统
3、支付
4、退出登陆当路由离开的时候
props:{
id:{
type:String,
default:""
},
name:{
type:String,
default:""
}
}beforeRouteLeave(to,from,next){
var flag = window.confirm("您确定要离开吗?");
if(flag){
next();
}
}