Vue-router学习笔记组件与模式学习

文章目录

前言
一、引入vue-router组件
1.1、vue2项目引入vue-router
vue3项目引入vue-route
二、Vue-router两种模式
三、this.$router详解
router对象
动态加载路由
案例
二、HTML使用Vue-router
参考文章

前言

本篇博客是vue-router的整理笔记，若文章中出现相关问题，请指出！

当前该链接失效了，有需要的小伙伴可以去b站或者技术胖官网去找相应的视频与笔记。

所有博客文件目录索引：博客目录索引(持续更新)

一、引入vue-router组件

1.1、vue2项目引入vue-router

引入依赖：

npm install vue-router@3.2.0

src目录下创建router目录，添加index.js文件：

import Vue from "vue";
import VueRouter from 'vue-router'
// 引入组件
import HelloWorld from '../components/HelloWorld.vue'
import Test from '../components/Test.vue'

Vue.use(VueRouter)

//定义路由组件
const routers = [
  {
    path: '/',
    name: 'Home',
    component: HelloWorld
  },
  {
    path: '/test',
    name: 'Test',
    component: Test
  },
]

//创建router实例
const router = new VueRouter({
  routers
})

export default router;

在main.js文件中进行引入router

// 引入router/index.js
import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

vue3项目引入vue-route

npm install vue-router@4 -s

二、Vue-router两种模式

SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;

vue-router(也就是SPA实现)在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。

1、哈希模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据

2、History模式

由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

可以看到没有了#，实际效果与哈希模式一致！

在vue-cli中开启History模式：在index.js中添加下面第2行开启，默认没有该行

const router = new VueRouter({
  mode: 'history',
  routes
})

对于匹配不到的路径，我们应该给其配置指定的跳转路径：下面就是对于不匹配的路径跳转至/404

export const routes = [ 
  {path: "/", name: "homeLink", component:Home},
  {path: "/404", name: "404", component:err404},
  {path: "*", redirect: "/404"}]  //进行重定向

若是不设置匹配路径，那么错误的路径就会导致对应的组件渲染失败不显示！

三、this.$router详解

router对象

//当前页面根据url路径动态刷新视图组件
this.$router.push("/about?username=changlu&age=8");

动态加载路由

参考文章：vue动态路由 this.$router.addRoutes

methods: {
    addRouter() {
        //1、获取到当前的routers路由
        const routes = this.$router.options.routes;
        //2、动态添加一个路由
        routes.push({
            path: "/test2",
            name: "test2",
            //引入方式1：
            component: (resolve) => require(["./Test2.vue"], resolve),
            //方式2：component: () => import("@/views/Test2.vue")   //根据指定路由进行添加
        });
        //3、添加路由
        this.$router.addRoutes(this.$router.options.routes);
        console.log("routers=>", routes);
    },
},

案例

跳转网址方式(含携带案例)

//1、字符串跳转
this.$router.push("/about");
//2、传输对象跳转，可任意传入name、path均可进行跳转
this.$router.push({ path: "/about" });
//3、刷新组件并添加params，根据name来进行跳转（可传参），对应vue组件获取参数方式：this.$router.currentRoute.params。
this.$router.push({ name: "About", params: { userId: 123 } });
//4、网址携带参数，如：http://localhost:8081/#/about?plan=private，获取参数方式：this.$router.currentRoute.query。
this.$router.push({ path: "/about", query: { plan: "private" } });

router.go()

//router.go(n)这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)
//1、在浏览器记录中前进一步，等同于 history.forward()，设置正数则表示前进步数
this.$router.go(1);

//2、后退一步记录，等同于 history.back()
this.$router.go(-1);

命名路由：效果与this.$router.push({ name: "About", params: { userId: 123 } });一致

<router-link :to="{ name: 'About', params: { userId: 123 } }">User</router-link>

二、HTML使用Vue-router

想要在HTML中使用vue-router首先需要先引入vue.js，一切基于vue.js来进行管理！

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!--使用 router-link 组件进行导航 -->
            <!--通过传递 `to` 来指定链接 -->
            <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
            <router-link to="/">Go to Home | </router-link>
            <router-link to="/about">Go to About</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

    <script>
        // 1. 定义路由组件.
        // 也可以从其他文件导入
        const Home = { template: '<div>Home<button>点击</button></div>' }
        const About = { template: '<div>About</div>' }

        // 2. 定义一些路由
        // 每个路由都需要映射到一个组件。
        // 我们后面再讨论嵌套路由。
        const routes = [
            { path: '/', component: Home },
            { path: '/about', component: About },
        ]

        // 3. 创建路由实例并传递 `routes` 配置
        // 你可以在这里输入更多的配置，但我们在这里
        // 暂时保持简单
        const router = VueRouter.createRouter({
            // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
            history: VueRouter.createWebHashHistory(),
            routes, // `routes: routes` 的缩写
        })
        console.log("router=>", router)

        // 5. 创建并挂载根实例
        const app = Vue.createApp({})
        //确保 _use_ 路由实例使
        //整个应用支持路由。
        app.use(router)

        app.mount('#app')

        // 现在，应用已经启动了！
        console.log(this.$route)

    </script>

</body>

</html>

对应的路由规则通过存放在一个数组中，创建router实例指定路由模式以及路由规则数组，最终将其添加到Vue进行管理！

效果：点击指定的a链接页面上的指定组件进行刷新对应的路由组件。

重点：当前createRouter创建的路由实例与之后在某个组件中调用this.$route获取到的实例一致。

参考文章

[1]. vue-router 动态添加路由

[2]. vue-router详解

vue路由router的详解

前言