VueRouter是Vue.js官方的路由管理模块，用于在单页应用中管理组件和路由。本文介绍了如何配置VueRouter，包括基本配置、封装、路由跳转、激活样式和参数传递。通过创建和导入组件，设置路由映射，使用目录
一、简介
1、前提
在Webpack的【Vue组件化抽离】中，可以发现使用Vue以这种模式开发，最终打包的入口文件只有一个html文件，该程序被称为 SPA（单页应用程序），那么就没法使用传统的页面跳转去切换页面，因为Vue中已经没有真实的多页面了，都是组件(.vue)
2、性质
Vue Router 就是用于将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们，模拟一个多页面交互的效果
二、基本配置
1、前提
（1）终端操作
①创建项目
vue create lean-router②进入项目目录
cd lean-router③安装vue-router
npm install vue-router@3④启动项目
npm run serve（2）main.js文件操作
import Vue from 'vue'
import App from './App.vue'
// 引入
import VueRouter from 'vue-router'
// 使用
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
2、原理代码
（1）src文件夹下新建文件夹views（项目已有就不用创建啦）=》新建HomePage.vue=》构建vue代码框架
（2）页面组件引入
// 组件引入
import Home from "vue-router"（3）路由映射配置
const routes=[
{
path:'/home',//注意是/不是./
namePage:'HomePage',//建议写每个路由唯一的名字
component:'Home',//注意component没有s
}
]（4）路由实例的创建
const router = new VueRouter({
// routes:routes,
routes//增强写法
})（5）启用：在Vue实例中使用
import Vue from 'vue'
import App from './App.vue'
// 引入
import VueRouter from 'vue-router'
// 组件引入
import Home from "@/views/HomePage.vue"
// 使用
Vue.use(VueRouter)
Vue.config.productionTip = false
const routes=[
{
path:'/home',//注意是/不是./
namePage:'HomePage',//建议写每个路由唯一的名字
component:Home,//注意component没有s
}
]
const router = new VueRouter({
// routes:routes,
routes//增强写法
})
new Vue({
// Vue实例使用
router,
render: h => h(App),
}).$mount('#app')
（6）指定位置显示
<router-view />
三、封装VueRouter
1、创建文件
在src文件夹下创建文件夹router=》创建router.js
2、引入及使用
根据上面原理的步骤，在router.js文件中进行Vue、VueRouter、组件的引入及使用
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/HomePage.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/home", //注意是/不是./
namePage: "HomePage", //建议写每个路由唯一的名字
component: Home, //注意component没有s
},
];
const router = new VueRouter({
// routes:routes,
routes, //增强写法
});
3、导出、导入router
router.js文件
export default router;main.js文件
import Vue from 'vue'
import App from './App.vue'
import router from "./router/router.js"
Vue.config.productionTip = false
new Vue({
// Vue实例使用
router,
render: h => h(App),
}).$mount('#app')
4、配置第二个页面
（1）在views文件夹下创建AboutPage.vue文件
（2）在router.js文件配置AboutPage新页面的路由
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/HomePage.vue";
import About from "@/views/AboutPage.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/home", //注意是/不是./
name: "HomePage", //建议写每个路由唯一的名字
component: Home, //注意component没有s
},
{
path: "/about",
name: "AboutPage",
component: About,
},
];
const router = new VueRouter({
// routes:routes,
routes, //增强写法
});
export default router;
四、路由跳转
1、<router-link>组件
（1）属性
①to：指定当前组件要激活的路由，值来源于【routes】中的【path】
②tag：此组件默认渲染为`<a>`标签，传入标签名可以指定其渲染的标签
（2）App.vue文件编写
<template>
<div id="app">
<router-link to="/home" tag="button">主页</router-link> |
<router-link to="/about" tag="button">关于</router-link>
<router-view />
</div>
</template>
2、$router对象
（1）push(location)
location：跳转目标路由，可以是字符串路径，或一个描述地址的对象
①字符串
$router.push('home') //注意没有./注意是router不是route
②对象
$router.push({ path: 'home' })
（2）replace()
替换掉当前的路由，不会在浏览器的 history 中记录【即页面跳转后无法返回】
①字符串
$router.replace('home')
②对象
router.replace({ path: 'home' })
<template>
<div id="app">
<router-link to="/home" tag="button">主页</router-link> |
<router-link to="/about" tag="button">关于</router-link>
<div>
<span @click="goHome">主页</span> |
<span @click="goAbout">关于</span>
</div>
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
methods:{
goHome(){
this.$router.push('home')
},
goAbout(){
this.$router.repalce('about')
}
}
}
</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>
（3）go(n)
在浏览器history记录中，向前或后退n步。n：整数。
五、激活样式
1、nav标签
没有任何样式效果，通过用于包裹<router-link>
<nav>
<router-link to="/home" tag="button">主页</router-link> |
<router-link to="/about" tag="button">关于</router-link>
</nav>2、找选择器
nav .router-link-active {
color: red;
}六、路由参数
1、query参数
使用定义路由时的path属性进行跳转，参数会显示在浏览器地址栏上【刷新不会消失】
（1）传递参数
①在<router-link>的to属性后加? 进行拼接
<router-link to='/home?id=1234' tag='button'></router-link>②$router对象
goHome() {
this.$router.push({
path:'home',
query:{
name:'传过去'
}
});
},（2）获取参数：到传递参数的页面HomePage.vue，进行参数获取
<template>
<div>
<h1>主页</h1>
<button @click="getName">获取name</button>
</div>
</template>methods: {
getName() {
console.log(this.$route.query);
},
},
2、params参数
使用定义路由时的name属性进行跳转，参数不会显示在浏览器地址栏上
（1）传递参数
goAbout() {
this.$router.replace({
name:'AboutPage',
params:{
age:18
}
});
},（2）获取参数
<template>
<div>
<h1>关于</h1>
<button @click="getAge">获取age</button>
</div>
</template>methods: {
getAge(){
console.log(this.$route.params);
}
},
（3）注意
①要在router.js文件中，定义路由name属性唯一，name:"HomePage"
②此方式跳转带参，在刷新参数会消失
③跳转时，若写成query的属性，参数参数会失败
3、动态路径参数
（1）区别
【query传参】可以让参数保留在链接里，用户分享链接时不丢失参数
【params传参】可以避免参数名暴露，但是用户分享连接时会丢失参数
【动态路径参数】结合了以上两者的优点，既能保留参数信息在链接里，又能避免暴露参数名
（2）格式：path:"path.../:key"
①在router.js文件中，进行path拼接
const routes = [
{
path: "/home/:userName", //注意是/不是./
name: "HomePage", //建议写每个路由唯一的名字
component: Home, //注意component没有s
},
{
path: "/about",
name: "AboutPage",
component: About,
},
];②在App.vue文件跳转路径拼接
<router-link to="/home/sxx" tag="button">主页</router-link>
（3）query传参
goHome() {
this.$router.push({
path:'/home/zhangsan', //注意home前面有/
});
},（4）params传参
goHome() {
this.$router.push({
name:'HomePage',
params:{
userName:'zhangsan'
}
});
},
237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
