开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情
技术背景：在传统多页面网站开发中，当需要多个本地页面时，我们需要写多个HTML页面，然后通过使用 <a/> 标签来实现页面间的互相跳转。此种应用称为多页面应用MPA（MultiPage Application）。
然而，我们熟悉的js框架如vue，react,angular都属于单页面应用框架，SPA (SinglePage Application)，对于SPA而言，所有的HTML,JS,CSS代码都通过单个页面加载。当对Vue工程进行上线前的打包时，我们会发现在生成的dist文件夹里只有一个index.html页面以及一些静态资源，很明显，只有一个页面的情况下使用传统的<a/>标签方式来实现跳转是不行的。
由此便引入前端路由的概念，前端路由的产生就是为解决单页面应用只有一个URL带来的导航问题。实现方式上需要监测URL的变化，获取URL地址，通过解析来匹配路由规则实现跳转，这里的跳转更准确的说是替换当前页面上的dom，替换当前页面容器里的内容，而不是传统意义上的去服务器请求新页面。
Step1: 给你的Vue项目工程中引入 vue-router，命令如下
npm install vue-router -s
Step2: 在你的项目工程src目录下新建router文件夹，然后，在该文件夹下创建index.js文件
2.1 在index.js中定义路由，每个路由都需要映射到一个已有组件。（将vue中的业务组件映射到路由上）。
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
2.2 创建路由对象实例，传入定义好的路由 routes进行配置。此处需配置 history，否则会报错。history对应两种路由模式，普通模式，createWebHistory()。哈希模式，createWebHashHistory()。注意此处为函数。
const router = createRouter({
history:createWebHistory(),
routes,
})
Step3: 将路由对象实例 router 挂载到vue。工程入口文件main.js中。.use(router)
createApp(App).use(router).mount('#app')
Step4: 在需要显示路由界面的地方加入<router-view>标签，本示例在App.vue的template中添加。路由界面需要显示在 <router-view></router-view>。
<template>
<router-view></router-view>
</template>
效果展示：
1.普通路由模式 createWebHistory() http://localhost:8080/about
2.哈希路由模式 createWebHashHistory() http://localhost:8080/#/home
页面跳转的几种方式
声明式跳转 router-link 标签
方式1：使用<router-link>标签，在编译之后，<router-link> 会被渲染为<a>标签，to会被渲染为 href，当 <router-link> 被点击的时候，url 会发生相应的改变。如果使用 v-bind 指令，还可以在 to 后面接变量，配合 v-for 指令可以渲染导航菜单。
基础用法：<router-link to="/home">to page2</router-link>
1.1 不带参数
// router-link中链接如果是'/'开始就是从根路由开始，
// 如果开始不带'/'，则从当前路由开始。
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
1.2 带参数
// 先要配置路由
path: '/user/:id'
// to需绑定 :to
<router-link :to="'/user/' + this.id"> <router-link/>
// 接收参数
this.$route.params.id
如果对于所有 ID 各不相同的用户，都要使用 home 组件来渲染，可以在 routers.js 中添加动态参数：
{
path: '/home/ :id',
component: Home
}
这样 "/home/user01"、"/home/user02"、"/home/user03" 等路由，都会映射到 Home 组件。然后还可以使用 $route.params.id 来获取到对应的 id。
<script>
//import { onMounted } from '@vue/runtime-core'
import { useRoute, useRouter } from 'vue-router';
export default {
setup(){
// const router = useRouter();
const route = useRoute(); // Vue3的setup函数里，并没有this这个概念
//在新的vue-router里面尤大加入了一些方法，useRoute()代替this.$route
console.log("this is page one ",router,route.params.id);
// onMounted(()=>{
// console.log("onMounted");
// });
}
}
</script>
vue3
<script>
export default {
setup(){}
}
</script>
----------------------------------------
<script>
import { onMounted } from '@vue/runtime-core'
export default {
setup(){
onMounted();
}
}
</script>
-----------------------------------------
<script>
import { onMounted } from '@vue/runtime-core'
export default {
setup(){
console.log("");
onMounted(()=>{
});
}
}
</script>
-----------------------------------------
// 模板 https://juejin.cn/post/7078865301856583717
export default{
setup(){
// 变量
const msg = 'Hello!'
// 函数
function log() {
console.log(msg)
}
//想在tempate里面使用需要在setup内return暴露出来
return{
msg,
log,
getToday
}
} //setup
} // export default
</script>
事件跳转 this.$router.push()
跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面
① 字符串
this.$router.push('/home')
② 对象
this.$router.push( {path:'/home'} )
③ query 传参，相当于get请求，页面跳转时参数会在地址栏中显示，通过this.$route.query.id获取
// 变成 /user?id=2
this.$router.push({
path:'/user',
query:{
id:this.id
}
})
④ params 传参，相当于post请求，页面跳转时参数不会在地址栏中显示,通过this.$route.params.id获取
this.$router.push({
path:'/user',
params:{
id:this.id
}
})
示例：
<script>
//import { onMounted } from '@vue/runtime-core'
import { useRoute, useRouter } from 'vue-router';
export default {
setup(){
const route = useRoute();
console.log("this is page one ",route.params.id);
// onMounted(()=>{
// console.log("onMounted");
// });
const router = useRouter();
const goToPageTwo = ()=>{
router.push("/two");
};
return{
goToPageTwo,
}
}
}
</script>
注：传参是 router，接收参数是 route
this.$router.replace{path:'/user'}
使用方法同上。同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的
this.$router.go(n)
n可为正数或负数，表示当前页面向前或者向后跳转多少个页面
以上。
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情
