使用到Vue的项目，我们最常见使用的就是Vue配套的Vue Router库。
Vue-Router是Vue.js的官方路由
创建路由项目（ 创建vue-cli2项目，带vue-router）
电脑终端vue ui
选择项目路径，创建项目（项目名称只能小写字母，不能大写）
选择手动配置
可以不预设(如果预设了，会把这个项目当作模版，下次再创建时可以选择这个模版创建项目)
打开项目，可以直接运行
nom run serve
安装三方：
vue add axios (如果报错，设置vue.config.js的lintOnSave:false)
vue add element-ui
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
lintOnSave:false, //是否开启编辑器强检查
transpileDependencies: true,
productionSourceMap:false, //是否暴露源代码
outputDir:'betatest' //打出的包的名称
})
创建路由项目会自带路由配置代码
- router的index.js：路由配置文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/home',
name: 'home',
component: HomeView //导入文件路径，跳转会快些
},
{path: '/homework/:id', name: 'Question',meta:{title:'Question'}, component:MatchingDetails},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') // 这种写法是懒加载，跳转会慢些， ../是指相对当前文件的上一层目录（即：src）
},
{
path: '/HelloWorld',
name: 'HelloWorld',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '@/components/HelloWorld.vue') // @/是指src的绝对路径
}
{
path: "/",
redirect: "find" //默认显示推荐组件(路由的重定向)
},
{
path: "/find",
name: "Find",
component: Find,
//二级路由
children: [{
path: "/",
redirect: "recom" //默认显示推荐组件
},
{
path: "ranking", //注意二级路由的路径千万不要加/
component: Ranking
},
]
},
{
path: "/my",
name: "My",
component: My
},
{
path: "*",
component: NotFound //定义找不到已有组件时显示404
},
]
//用规则生成路由对象
// 创建路由对象并且传入规则
const router = new VueRouter({
routes,
mode: "history" //路由模式(默认为hash模式)
})
- 挂载路由
main.js
import router from "./router";
//把路由对象注入到new Vue实例中
new Vue({
router, //导入路由对象
render: h => h(App),
}).$mount('#app')
//用router-view作为挂载点, 切换不同的路由页面
3.使用路由
例如：
（1）法：标签路由跳转：router-link
app.vue:
<template>
<div id="app">
<nav>
<!-- router-link： 路由跳转标签-->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<!-- <router-view/>: 路由占位，(默认展示第一个路由页面)等同于<router-view></router-view>-->
<router-view/>
</div>
</template>
（2）法：js路由跳转：
this.$router.push('/find')
Vue-Router跳转方法
参考：https://blog.csdn.net/xiao_yu_liu/article/details/125003546
https://blog.csdn.net/sebeefe/article/details/126080415
1法、使用router-link
使用router-link标签，我们通常会使用到2个参数，最常用的就是to参数
to参数，表示你想要跳转到的路由对象
router-link标签，会调用router.push()方法，该方法会在你点击浏览器会退按钮的时候，无痕回退一个路由。
可以是路由路径
<router-link to="/home">Home</router-link>
<router-link :to="'/home'">Home</router-link>
也可以是路由对象，甚至还可以为其携带参数
<router-link :to="{ path: '/home' }">Home</router-link>
<router-link :to="{ name: 'user', params: { userId: '123' }}">User</router-link>
<router-link :to="{ path: '/register', query: { plan: 'private' }}">
Register
</router-link>
router-link好处 : 自带激活时的类名, 可以做高亮
在跳转路由时, 可以给路由对应的组件内传值
在router-link上的to属性传值, 语法格式如下 :
(方式一)
to=/path参数名=值
例：to="/part?name=小明"
对应页面组件接收传递过来的值
this.route.query.name
(方式二)
to=“/path/值” (需在路由规则里配置/path/:参数名)
例：to="/part/小王"
配置：path:"/part/:username"
对应页面组件接收传递过来的值 （注意动态参数需要用params接收）
this.route.params.username
2法、使用router-replace
设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()，所以导航后不会留下历史记录。
<router-link to="/abc" replace></router-link>
方法1和2是使用html的方法来调用
3法、编程式-用JS代码来进行跳转
语法: path或者name任选一个, 传参query或者params
一、$ router 和 $ route的区别
route : 路由信息对象，只读对象
router.push({ name:‘hello’, query:{ username:‘word’, age:‘11’ } })
route.query.username;
s
路由配置里面设置路由路径时也可以带参数
const routes = [
{ path: '/users/:id', component: User },
]
代码中的**id **字段，就是路径参数，当使用params的时候，就可以获取到。this.$router. params.id
通过params传参， path会忽略params 所以path不能和params一起使用
注意：这里使用name路由跳转方式路径不需要加 / 因为它只是个名字
this.route.params.id
通过query传参，path 和 name路由跳转方式，都可以用query传参
this.router.push({
name:"Search",
query:{ //query是个配置项
age:20
}
})
另一个页面接收
this.$route.query.age
query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数
总结：
- query和params区别：
query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数
params相当于POST请求，参数不会在地址栏中显示 - 使用path方式跳转路由 path会忽略params 所以path不能和params一起使用
推荐使用name和params方式实现路由跳转 - params传参，push里面只能是 name:‘xxx’,不能是path:‘/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined
target="_blank" 打开新窗口
标签方法：
//当前页面路由跳转：只改变url
<router-link to="/feedBack">
<div class="menus-other-list menus-other-list2 noselect">
<p><i class="icon"></i>Feedback</p>
</div>
</router-link>
//打开新窗口路由跳转：另开了一个页面
<router-link to="/feedBack" target="_blank">
<div class="menus-other-list menus-other-list2 noselect">
<p><i class="icon"></i>Feedback</p>
</div>
</router-link>
js方法：
//默认是当前窗口替换为新路径
this.$router.push('/login')
this.$router.push({path:'/matched-results',query:{questionText:this.input_str}});
//打开新窗口路由跳转：另开了一个页面
let text= this.$router.resolve({
path: "/feedback"
});
window.open(text.href, '_blank')
动态路由：
页面路径：src/views/homeWork.vue
homeWork.vue的js:
export default {
name: "HomeWork",
}
router/index.js:
{path: '/homework/:id', name: 'HomeWork',meta:{title:'Homework'}, component: HomeworkComponent},
跳转：
<router-link target="_blank" @click.native="clickDetails('View Answer-htmlContent')" :to="'/homework/'+item.id">
</router-link>
2.js跳转
this.$router.push('/homework/'+item.id");
获取id的值：
this.$route.params.id
