一、简介
点击查看vue-router官网
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：
- 嵌套路由映射
- 动态路由选择
- 模块化、基于组件的路由配置-
- 路由参数、查询、通配符-
- 展示由 Vue.js 的过渡系统提供的过渡效果-
- 细致的导航控制-
- 自动激活 CSS 类的链接-
- HTML5 history 模式或 hash 模式-
- 可定制的滚动行为-
- URL 的正确编码
二、安装
2.1 包管理器
对于一个现有的使用 JavaScript 包管理器的项目，你可以从 npm registry 中安装 Vue Router：
npm install vue-router@4
//vue2 安装对应的版本vue-router@3，例如指定版本：3.6.5
npm install vue-router@3.6.5
如果你打算启动一个新项目，你可能会发现使用 create-vue 这个脚手架工具更容易，它能创建一个基于 Vite 的项目，并包含加入 Vue Router 的选项：
npm create vue@latest
你需要回答一些关于你想创建的项目类型的问题。如果您选择安装 Vue Router，示例应用还将演示 Vue Router 的一些核心特性。
使用包管理器的项目通常会使用 ES 模块来访问 Vue Router，例如 import { createRouter } from ‘vue-router’。
三、实例演示
Vue Router 是 Vue 官方的客户端路由解决方案。
客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。
Vue Router 基于 Vue 的组件系统构建，你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。
提醒：下面实例是在TestVue2的项目里运行的
3.1 TestVue2项目结构图
3.2 安装 vue-router@3.6.5
npm install vue-router@3.6.5
安装成功后，查看package.json文件
3.3 创建路由器实例
- 在src目录里创建views文件夹，在里面分别创建teststore1.vue和teststore2.vue文件
- 在src目录里创建router文件夹，在里面创建index.js文件
router文件夹里index.js文件代码
import Vue from 'vue'
import Router from 'vue-router'
import TestStore1 from '../views/teststore1.vue'
Vue.use(Router)
export default new Router({
mode:'history',
// base: 'http://192.168.0.102:8080/',
// 下面第一个 path:'/', 解决默认进入的官方首页问题
routes:[
{
name:'首页',
path:'/',
component: () => import ("../views/home.vue")
},
{
name:'状态管理1',
path:'/teststore1',
component: TestStore1,
meta:{
title:'store1'
}
},
{
name:'状态管理2',
path:'/teststore2',
component: () => import("../views/teststore2.vue")
},
]
})
teststore1.vue代码
<template>
<div>
<!-- <h1>store 1 数量：{{this.$store.state.count}}</h1> -->
<!-- <h1>getComputedCount 数量：{{getComputedCount}}</h1> -->
<!-- <h1>mapState 数量：{{count}}</h1>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</br>
<button @click="doactions">点击两秒后数量自动加1</button>
<br />
<br />
<p>
<button v-on:click="getCount">获取localCount最新值</button>
获取到的数量：{{localCount}}
</p>
<br />
<br /> -->
<button @click="openTest2Page">打开test2页面</button>
</div>
</template>
<script>
// import {
// mapState
// } from 'vuex'
export default {
name: 'teststore1',
data() {
return {
localCount: 0,
}
},
// computed: {
// ...mapState([
// 'count',
// ]), //推荐这种方式
// },
// watch: {
// count: {
// handler(newVal, oldVal) {
// console.log(`teststore1 watch 新的值: ${newVal} , 旧的值: ${oldVal}`)
// },
// }
// },
created() {
console.log("teststore1 执行了 created ")
},
activated() {
console.log("teststore1 执行了 activated ")
},
mounted() {
// console.log("teststore1 执行了 mounted ", this.$store)
},
beforeUpdate() {
console.log("teststore1 执行了 beforeUpdate ")
},
updated() {
console.log("teststore1 执行了 updated ")
},
beforeDestroy() {
console.log("teststore1 执行了 beforeDestroy ")
},
destroyed() {
console.log("teststore1 执行了 beforeDestroy ")
},
methods: {
// increment() {
// this.$store.commit('increment')
// },
// decrement() {
// this.$store.commit('decrement')
// },
// // // 异步任务 store.dispatch
// doactions() {
// this.$store.dispatch('tryactions', 2000)
// },
// getCount() {
// this.localCount = this.$store.state.count
// console.log("执行了 getCount this.localCount = ", this.localCount)
// },
openTest2Page(){
this.$router.push('/teststore2')
},
}
}
</script>
<style>
button {
margin-left: 1.25rem;
margin-top: 1.0rem;
}
</style>
teststore2.vue代码
<template>
<div>
<!-- <h1>store 2 数量：{{this.$store.state.count}}</h1> -->
<!-- <h1>store 2 数量：{{count}}</h1>
<button @click="increment">+</button>
<button @click="decrement">-</button> -->
<button @click="goBack">返回到上个页面</button>
</div>
</template>
<script>
// import {
// mapState
// } from 'vuex'
export default {
name: 'teststore2',
data() {
return {
mCount: 0,
}
},
created() {
console.log("teststore2 执行了 created ")
},
activated() {
console.log("teststore2 执行了 activated ")
},
mounted() {
console.log("teststore2 执行了 mounted ", this.$store)
},
beforeUpdate() {
console.log("teststore2 执行了 beforeUpdate ")
},
updated() {
console.log("teststore2 执行了 updated ")
},
beforeDestroy() {
console.log("teststore2 执行了 beforeDestroy ")
},
destroyed() {
console.log("teststore2 执行了 beforeDestroy ")
},
// computed: {
// ...mapState([
// 'count',
// ]),
// },
mounted() {
// console.log("teststore2 执行了 mounted ",this.$store)
},
methods: {
// increment() {
// this.$store.commit('increment')
// },
// decrement() {
// this.$store.commit('decrement')
// },
goBack(){
this.$router.replace('/teststore1')
}
}
}
</script>
<style>
button {
margin-left: 1.25rem;
}
</style>
四、注册路由器插件
在router文件里index.js里使用了Vue.use(Router)，接下来在main.js将index.js导入， 将其注册为插件
main.js文件代码
import Vue from 'vue'
import App from './App.vue'
// 将 Vuex Store 注入到应用中
//import store from './store'
import router from './router'
Vue.config.productionTip = false
// Vue.prototype.$store = store
// https://www.jb51.net/javascript/297247rzd.htm
// 如果使用 ES6，你也可以以 ES6 对象的 property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)：
new Vue({
router,
render: h => h(App),
}).$mount('#app')
// 使用 ES2015 语法
// new Vue({
// router: router,
// store: store,
// render: h => h(App),
// }).$mount('#app')
等价于
const app = createApp(App)
app.use(router)
app.mount('#app')
和大多数的 Vue 插件一样，use() 需要在 mount() 之前调用。
如果你好奇这个插件做了什么，它的职责包括：
- 全局注册 RouterView 和 RouterLink 组件。
- 添加全局 $router 和 $route 属性。
- 启用 useRouter() 和 useRoute() 组合式函数。
- 触发路由器解析初始路由。
五、App.vue里使用router-view
App.vue文件代码
<template>
<div id="app">
<!-- 重要的步骤 -->
<router-view />
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
<!-- <router-link to="/teststore1">teststore1</router-link> -->
<!-- <div @click="test">点击跳转</div> -->
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
// components: {
// HelloWorld
// },
methods: {
test(){
console.log("执行了 test")
this.$router.push('/teststore1')
}
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
六、访问路由器和当前路由
你很可能想要在应用的其他地方访问路由器。
如果你是从 ES 模块导出路由器实例的，你可以将路由器实例直接导入到你需要它的地方。在一些情况下这是最好的方法，但如果我们在组件内部，那么我们还有其他选择。
在组件模板中，路由器实例将被暴露为$router。这与同样被暴露的 $route 一样，但注意前者最后有一个额外的 r。
如果我们使用选项式 API，我们可以在 JavaScript 中如下访问这两个属性：this.$router 和 this.$route。在演练场示例中的 home.vue 组件中，路由器就是这样获取的。
home.vue代码
<template>
<div>
<h1>首页</h1>
<router-link to="/teststore1">打开teststore1</router-link>
<br />
<button @click="test">打开teststore2页面</button>
</div>
</template>
<script>
export default {
methods: {
test() {
this.$router.push('/teststore2')
}
},
}
</script>
<style>
</style>
这里调用了 push()，这是用于编程式导航的方法
七、启动TestVue2项目
在终端里输入下面命令：
提醒：因为电脑里node版本问题，前面加了NODE_OPTIONS=–openssl-legacy-provider
NODE_OPTIONS=--openssl-legacy-provider npm run serve
八、效果图
home.vue页面
teststore1.vue页面
teststore2.vue页面
九、TestVue2项目源码
点击查看TestVue2源码
