zoukankan      html  css  js  c++  java
  • Vue配置路由和传参方式及路由守卫!

    安装路由
    npm i vue-router -S

    引入路由
    import VueRouter form VueRouter

    注入路由模块
    Vue.use(VueRouter)

    定义路由匹配规则
    let routes = [
    {...},
    {...}
    ]

    上列匹配规则中 对象有如下属性
    path : 路由路径
    component : 所加载的组件
    name : 别名
    redirect : 重定向
    children : 子级路由

    创建路由实例
    let router = new VueRouter({
    routes : routes //routes属性值应该为上述路由匹配规则数组
    })

    将路由实例注入到初始化代码中

    let app = new Vue({
    data:...,
    router : router
    })


    跳转:
    标签跳转
    <router-link to="" ></router-link>
    该标签拥有属性
    to : 目标路径 也可以是对象
    tag: 指定该标签解析成实际的标签类型
    activeClass: 指定选中时的class名

    js跳转(编程式导航)
    在组件内:
    this.$router.push()
    this.$router.replace()
    this.$router.go() 前进或者后退 正前负退

    路由传参
    传统search传参(?号传参)
    传送数据
    标签传参
    <router-link :to="{name:'...',query:data}"></router-link>
    编程传参
    this.$router.push({
    name : "...",
    query : data
    })
    接收数据
    this.$route.query

    路径传参(动态路由)
    路由配置:
    {path:"/detail/:id",component:....}
    传送数据:
    <router-link :to="{name:'...',params:data}">
    编程传参:
    this.$router.push({name:'...',params:data})

    接收参数
    this.$route.params


    路由守卫(导航守卫)
    路由的钩子函数

    三大类
    全局
    决定跳转前
    router.beforeEach((to,from,next)=>{})
    to代表目标路径对象
    from代表来源路径对象
    next() 是否继续 参数有三种
    true或者不传 代表允许跳转
    false 代表中止跳转
    填入路径 会重定向到指定路径

    决定跳转后但还没有跳转时 此时无法阻止路由跳转
    router.afterEach((to,from)=>{})

    路由独享
    {path:"....",beforeEnter((to,from,next)=>{})}

    组件守卫
    进入当前组件前
    beforeRouteEnter((to,from,next)=>{})
    离开当前组件前
    beforeRouteLeave((to,from,next)=>{})

    路径没有变化但是参数变化时(多用于监听单纯的参数变化)
    beforeRouteUpdate((to,from,next)=>{})

  • 相关阅读:
    168. Excel Sheet Column Title
    461. Hamming Distance
    Tree Representation Implementation & Traversal
    404. Sum of Left Leaves
    572. Subtree of Another Tree
    20. Valid Parentheses
    Check time of different search methods
    Binary search tree or not
    Coin Change
    JS DOM:文档对象模型 --树模型 文档:标签文档,对象:文档中每个元素对象,模型:抽象化的东西
  • 原文地址:https://www.cnblogs.com/lishixiang-007/p/11337392.html
Copyright © 2011-2022 走看看