vue------ 路由创建 ------ William

Posted 2022-06-10 dongwei1

路由常用的配置项：

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");
        
    
)