欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

【Vue】路由

程序员文章站 2022-03-26 21:08:15
快速入门 1. 安装路由 npm install --save vue-router 2. 定义组件

快速入门

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

上一篇： (一)计算机体系结构

下一篇： 判断Input上传文件类型，文件大小

推荐阅读