一、引入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获取到的实例一致。
