重走vue之vue-router

最新推荐文章于 2024-08-21 10:43:34 发布

季后的风

最新推荐文章于 2024-08-21 10:43:34 发布

阅读量651

点赞数

分类专栏： vue 文章标签： html vue.js javascript

本文链接：https://blog.csdn.net/qq_40708840/article/details/109364587

版权

本文详细介绍了vue-router的使用，包括安装、基本配置、命名路由、重定向、别名、动态路由、嵌套路由、编程式导航、路由模式和导航守卫等关键概念，并提供了丰富的实例来辅助理解。

摘要由CSDN通过智能技术生成

vue-router

概述:vue-router是vue的核心插件，用来提供路由功能。通过路由的改变来动态加载组件，达到开发单页面应用网站的目的。

包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于vue.js过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的CSS class的链接
HTML5历史模式或hash模式，在IE9中自动降级
自定义的滚动条行为

安装

通过使用cdn导入在线资源

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

使用npm模块安装vue-router

npm install vue-router

如果是在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

基本使用

思路:把vue-router添加到项目中，将组件映射到路由，然后告诉告诉vue-router在哪里渲染它们。
基本的使用步骤:

定义要跳转到的路由组件
定义路由
创建 router 实例，然后传 routes 配置
创建和挂载根实例
在需要使用路由的HTML中通过<router-link to=""></router-link>将这个路由渲染出来

基于以上知识点,给出了一个比较完整的实例帮助理解:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>router实例</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>

<body>
    <div id="app">
        {
  {msg}}
        <!-- 4.使用路由 -->
        <div>

             <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
             
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                 <!-- 使用router-link标签创建a标签来定义导航链接 -->
            <router-link to="/a">去A路由</router-link>
            <router-link to="/b">去B路由</router-link>
            <a href="#/a">由a便签跳a路由</a>

        </div>
        <!-- 路由组件显示的位置 -->
         <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <div>
            <router-view></router-view>
        </div>
    </div>
    <script>
        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
        //1. 声明组件
        let myA = {
    
            template: `<div>A组件</div>`
        };
        let myB = {
    
            template: `<div>B组件</div>`
        };
        //2.定义路由对象数组    route 路由对象   router  路由器对象  routes 路由器对象数组
        let routes = [{
     path: '/a', component: myA }, {
     path: '/b', component: myB }]
        //3.创建路由器对象
        let router = new VueRouter({
    
            routes: routes
        })
        //4.创建和挂载根实例。
        // 记得要通过 router 配置参数注入路由，
        // 从而让整个应用都有路由功能
        new Vue({
    
            el: "#app",
            router: router,
            data: {
    
                msg: "hello"
            },
            components: {
    
                'my-a': myA,
                'my-b': myB
            }
        })
    </script>
</body>

</html>

命名路由

在配置路由的时候，为路由指定name属性，相当于为该路由进行命名，方便后期的路由跳转

const router = new VueRouter({
    
    routes: [ {
    path: '/user/:userId', name: 'user', component: User } ] 
    }
    )

路由重定向

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b

const router = new VueRouter({
    
    routes: [ 
        {
    path: '/a', name: 'a', redirect: '/b' },
    //重定向的目标也可以是一个命名好的一个的路由：
     {
   path: '/c', name: 'c', redirect: {
    name: 'foo' }  }
     //甚至是一个方法，动态返回重定向目标：
      {
    path: '/d', redirect: to => {
   
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
      ]
      })

路由别名

/a的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为/a，就像用户访问 /a 一样

const router = new VueRouter({
    
    routes: [{
    path: '/a', component: A, alias: '/b' }] })

注意点：当访问/a或者/b的时候实际上都打开的是A组件

基于上述知识点，下面给出一个完整例子帮助理解:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由重定向</title>
    <script src=