【Vue】路由

2020-04-24 16:00:55来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

【Vue】路由

快速入门

1. 安装路由

npm install --save vue-router

2. 定义组件

<template>
  <div>
    <h3>Home</h3>
    <router-link to="/login">Login</router-link>
  </div>
</template>
<script>
export default {};
</script>

3. 定义路由规则

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: () => import('../views/home.vue') },
        { path: '/login', component: () => import('../views/login.vue') },
    ]
});

4. 在需要显示路由位置放<router-view />

<router-view />

 

 

这就完成一个简单路由

深入路由

 

基础

VueRouter.model :

  • hash(默认):使用 URL 的 hash 来模拟一个完整的 URL
  • history :利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

<router-link> : 路由功能导航,默认生成<a>标签,可以使用tag属性修改生成的标签

<router-view /> : 路由出口,匹配到的路由会在这里渲染

 

动态路由

通常链接需要带上参数,根据参数显示不同结果

Vue动态路由用":" 匹配路径参数,然后就匹配的参数放入$route.params

1. 定义动态路由,这里需要对路由命名,获取名称和性别

{ path: '/login/:username/:sex', name: 'login', component: () => import('../views/login.vue') },

 

2. 路由链接 - 需要路由命名

<router-link :to="{ name: 'login',  params: { username, sex } }">Login</router-link>
<!--等价于-->
<router-link to="/login/WilsonPan/1">Login</router-link>

 

3. 组件获取路由参数

<h3>username : {{ this.$route.params.username }}</h3>
<h3>sex : {{ this.$route.params.sex === 1 ? "男" : "女" }}</h3>

 

注:除了可以设置路由参数,还可以设置query参数

<router-link :to="{ name: 'login', query: { id: 3 }, params: { username, sex } }">Login</router-link>
<!--等价于-->
<router-link to="/login/WilsonPan/1?id=3">Login</router-link>

 

组件获取query参数

<h3>id : {{ this.$route.query.id }}</h3>

 

嵌套路由

一个路由渲染的页面包含另外的路由

1. 定义路由

{
            path: '/', 
            name: 'home', 
            component: () => import('../views/home.vue'), 
            children: [
                { path: '/', component: () => import('../components/ComponentDemo.vue') },
                { path: '/directives', component: () => import('../components/Directives.vue') }

            ]
        }

 

2. 在需要显示子路由的地方放子路由渲染页面

 

<router-view />

 

 

 

导航守卫

导航守卫主要用来通过跳转或取消的方式守卫导航,导航守卫有全局的,单个路由的,组件级别,用于未登录控制访问,控制访问等。

全局路由

const router = new VueRouter({ ... })

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

 

  • to: Route: 即将要进入的目标路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 **resolve** 这个钩子。执行效果依赖 next 方法的调用参数。

路由独享的守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

 

组件内的守卫

 

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不!能!获取组件实例 `this`
    // 因为当守卫执行前,组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

 

 

 

转发请标明出处:https://www.cnblogs.com/WilsonPan/p/12770411.html


原文链接:https://www.cnblogs.com/WilsonPan/p/12770411.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:解决微信小程序引用echarts视图模糊的问题

下一篇:【Vue】状态管理