vue路由的安装和使用

发布时间：2023-05-06 文章分类：WEB开发, 电脑百科 投稿人：李佳 字号： 默认 | 大 | 超大 打印

@TOCVue 路由 vue-router

1 安装vue-router

npm i vue-router -s

2 创建路由模块

vue路由的安装和使用

// src/router/index.js就是当前项目的路由模块
// 1 导入Vue 和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入路由要用到的组件
import Home from '../components/Home.vue'
import Movie from '../components/Movie.vue'
import About from '../components/About.vue'
// 2 调用vue.use()函数，把VueRouter安装为vue插件
Vue.use(VueRouter)
// 3 创建路由的实例对象
const router = new VueRouter({
  // 定义数组routes[],对应哈希地址与组件之间的关系
  routes: [
  //路由规则
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
   {
      path: '/about',
      component: About,
      // about组件里的嵌套路由
      children: [
        { path: 'tab1', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    },
    // 路由重定向：强制跳转
    { path: '/', redirect: '/home' }
  ]
})
// 4 向外共享路由的实例对象
export default router

3 在main.js导入路由模块

// 1 导入路由模块，拿到路由实例
import router from '../src/router/index.js'

new Vue({
  render: h => h(App),
  //  2 挂载路由
  router: router
}).$mount('#app')

4 在App.vue中使用router-view占位符

<template>
  <div class="app-container">
    <h1>App2 组件</h1>
    //使用router-link替代a链接
   // <a href="#/home">首页</a>
   // <a href="#/movie">电影</a>
  //  <a href="#/about">关于</a>
    <hr />
    <router-view ></router-view>
  </div>
</template>

5 动态路由

5.1 定义：把hash地址可变的部分定义为参数项，提高路由规则的可复用性

5.2 在vue-router中使用英文的冒号定义参数项:id

vue路由的安装和使用

5.3 在组件中使用$route.prams.id进行调用

//Movie组件
<template>
  <div class="movie-container">
    <h3>Movie 组件---{{$route.params.id}}</h3>
    <hr>
    <button @click="showThis">打印this</button>
      </div>
</template>

注意1：在hash地址中，/后面的参数叫做“路径参数”

在路由“参数对象”$route中，需要使用$route.prams来访问路径参数

注意2 在hash地址中，“？”后面的参数叫做“查询参数”

在路由“参数对象”中， 需要使用$route.query来访问查询参数

注意3 在hash地址中，path只是路径部分，fullPath才是完整路径

例如
" /movie/1?name=%27as%27 " 是fullPath
" /movie/1" 是path

6 声明式导航VS编程式导航

6.1 声明式导航：通过a链接或router-link点击的跳转

6.2 编程式导航：通过location.href的跳转

6.3 vue-router提供的编程式导航API

6.3.1 跳转到指定hash地址，并增加一条历史记录

this.$router.push（‘hash地址’）

6.3.2 跳转到指定hash地址，并替换掉当前的历史记录

this.$router.replace（‘hash地址’）

6.3.3 在浏览历史中前进或后退

this.$router.go（数值n）
在实际操作中一般只前进或者后退一层，vue-router简化：

6.3.3.1前进

this.$router.forward()

6.3.3.2 后退

this.$router.back()

7 导航守卫

7.1 导航守卫可以控制路由的访问权限

7.2 全局前置守卫：每次发生路由的导航跳转时，都会触发全局前置守卫，可以对每个路由进行访问权限的控制

vue路由的安装和使用

7.2.1 全局前置导航守卫回调函数的3个形参

vue路由的安装和使用

标签 , ,