【vue路由】

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、路由的基础知识

1.什么是路由

概念对于单页面应用程序来说，组件和组件之间的跳转规则就是路由
特点 Vue路由允许我们通过不同的URL访问不同的内容（组件）

2.基本案例

HTML
< router-link >是一个组件，该组件用于设置一个导航链接，切换不同的HTML内容。to属性为目标地址，即要显示的内容。

  <!-- router-link将呈现为一个带有正确href属性的a标签 -->
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>|
        <router-link to="/news">News</router-link>|
        <router-link to="/mine">Mine</router-link>
        <!-- router-view路由出口，路由匹配到的组件将会渲染在这里 -->
        <router-view></router-view>

JavaScript

//1.定义两个组件，也可以是通过import导入的组件
const Home={template:`<div class="home"></div>`}
const About={template:`<div class="about"></div>`}
//2.定义路由映射（每个路由都需要映射一个组件）
const routes=[
{path:'/',component:Home},
{path:'/about',component:'my-about'},
];
//3.创建路由实例，并传递routs配置
const router=VueRouter.createRouter({
//内部提供了history模式的实现，为了简单起见，我们在这里使用hash模式
history:VueRouter.createWebHashHistory(),
routes,
})
//创建实例
count vm=Vue.createApp({})
//设置整个实例支持路由
vm.use(router);
//挂载实例
vm.mount('#app1');

通过调用 app.use(router)，我们可以在任意组件中以 this.$router的形式访问路由对象，并且以this.$route 的形式访问当前路由

3.router-link属性补充

1.to属性:
通过to属性可以规定路由的跳转地址

<router-link to='/'>首页</router-link>

to属性也可以写成绑定属性，那么他所绑定的值就会变成一个对象

<router-link :to="{path:'/'}">首页</router-link>

2.`replace属性:`
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

<router-link :to="{path:'/about'}" replace>关于我们</router-link>

二、动态路由

1.带参数的动态路由匹配

（1）很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 newsDetail 组件，它应该对所有新闻的详情进行渲染，根据新闻 ID 的不同，渲染的内容不同。在 Vue Router 中，我们可以在声明路由时，路径中使用一个动态字段来实现，我们称之为 路径参数；

{path:'/newsDetail/:id',name:'newsDetail',component:newsDetail}

（2）路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中this.$route.params 的形式暴露出来。因此，我们可以通过新闻 ID 获取内容。
（3）在获取参数前，先要清楚如何传递参数：
1.静态to属性传参

<router-link to="/newsDetail/14">新闻</router-link>

2.绑定to属性传参

<router-link to="{path:'/newsDetail/11}">新闻</router-link>

3.命名路由params传参（推荐）

<router-link to="{name:'newsDetail',params:{id:17,name:'list'}}">新闻</router-link>

注意：params传参要求路由必须是命名路由
4.query属性传参（路径中写？）

<router-link to="{path:'/about',query:{id:10}}">关于我们</router-link>

注意：不管是否为命名路由，都可以使用query传参

2.响应路由参数的变化

使用带有参数的路由时需要注意的是，当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。
解决办法：
要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.params

<router-link :to{name:'newsDetail',params:{id:12}}">新闻1</ruter-link>
<router-link :to{name:'newsDetail',params:{id:13}}">新闻2</ruter-link>

const newsDetail={
		template:`<div class="newsDetail"><input 		type="text"></div>`,
		mounted(){
			this.$watch(
				()=>this.$route.params.id,
				(toParam,oldparam)=>{
					console.log(toParam)
					console.log(oldparam)
				}
			)
		}
}

3.路由的匹配语法-参数自定义正则

(1)根据参数的不同，匹配不同的路由

<router-link :to{path:'/about/12'}">新闻1</ruter-link>
<router-link :to{path:'/about/zhangsan'}">新闻2</ruter-link>

{path:'/about/:id(\\d+)',component:about1},
{path:'/about/:name',component:About2},

注意：
1.对于转移字符\ ，必须多加一层 \
(2) 可重复的参数
如果你需要匹配参数不固定的的路由，可以使用三个符号：

*  0个或多个
+ 1个或多个
？ 0个或1个

< router-link>path方式使用：

<router-link :to="{path:'/about/12/13/14'}"关于我们3</router-link>

{path:'/about/:id+',component:About1}

命名路由params方式使用：

//传0个id参数
<router-link :to"{name:'about',params:{id:[]}}"关于我们3</router-link>
//传3个id参数
<router-link :to"{name:'about',params:{id:[1,2，3]}}"关于我们3</router-link>