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

路由常用的配置项：

path：路由请求的路径

component：路由匹配成功后需要渲染的组件或者页面

tag:改变组件内部渲染的元素 假设组件内部渲染的是a标签 tag="li" 那么li就会替换a

import 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
    }
]      

路由传参：

路由传参：

路由的传参接收方式统一在this.$route里面

1、query传值接收方式

query传值?后面的参数 &进行链接 /user?name=zhangsan&age=18

传值的方式：通过?进行数据的拼接 每个字段之间用&分隔 类似与get请求的方式
接收:this.$route.query

router.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、动态路径接收方式

在路由的配置项path中，设定传递参数的属性 方式为 /:属性.....
在路由跳转的属性中 设置属性的值 方式为 /detail/0/苹果

接收：this.$route.params

router.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传值的区别：

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.title

next((vm)=>{

console.log(vm);

});
},


beforRouteUpdate 路由更新的时候

当路由发生了改变，但是当前组件没有经历创建和销毁的时候，如果我们需要接收路由传递过来的数据时
我们就需要用到了beforRouteUpdate

props:{
    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();
    }
}      

全局守卫 全局钩子函数：

beforEach 一般情况下用来做一些路由公众部分的验证 登陆验证

router.beforeEach((to, from, next) => {
    if(to.meta.requireAuth){
        next();
    }else{
        if(getCookie("X-TOKEN")){
        next()
    }else{
        next("/login");
        }
    }
})      

发表于 2019-08-04 12:20 金风夜雨 阅读(...) 评论(...) 编辑 收藏

刷新评论刷新页面返回顶部