一.vue-router
vue的一个插件库,专门用来实现SPA应用
SPA应用:
单页Web应用
整个页面只有一个完整页面
点击导航链接不会刷新页面,只做局部刷新
数据通过ajax获取
路由导航包括
1.声明式路由导航:router-link
2.编程式路由导航:this.$router
二.基本使用
一.声明式路由导航(一级路由)
1.安装vue-router,2022年以后默认是vue-router4,但只能在vue3中使用,如果使用的是vue2的话需要指定版本
npm i vue-router@3
2.在main.js里引入
//引入路由
import VueRouter from 'vue-router';
//应用插件
Vue.use(VueRouter)
3.新建router文件夹及index文件,在components文件夹里新建两个测试文件,
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import router1 from "../components/router1";
import router2 from "../components/router2";
//创建并暴露一个路由器
export default new VueRouter({
//key,value值
routes:[
{
path:'/router1',
component:router1
},
{
path:'/router2',
component:router2
}
]
})
4.再次回到main.js引入router并使用
import Vue from 'vue'
import App from './App.vue'
//引入路由
import VueRouter from 'vue-router';
import router from './router'
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)
new Vue({
render: h => h(App),
router:router
}).$mount('#app')
5.在页面运用(声明式路由导航)
<!-- 引入点击链接,实际上是包装过后的a标签 -->
<router-link to="/router1">router1</router-link>
<router-link to="/router2">router2</router-link>
<!-- 展示的地方 -->
<router-view></router-view>
结果:
二.编程式路由导航()
1.绑定事件函数
2.$router的API(可以直接打印出来看)
this.$router.push(name:"...",params:{test:'...'})
name是命名式路由,params是传参,query也可以,二者区别不做介绍
this.$router.replace()
this.$router.go() //可正可负,括号内为需要跳转的步数
this.$router.back() //回退一步,与go(-1)同理
this.$router.forward() //前进
3.在跳转后的页面内
跳转并不会造成刷新,所以不会重新渲染dom,因此mounted函数不会奏效,可以考虑使用其他生命周期函数,或者在watch里面开展监视$route,使其每次检测到路由改变都初始化需要刷新的函数(建议设置属性immediate:true,不然第一次不会刷新)
this.$route.params.test就可以获得之前传递的参数