vue-router （两种路由模式、编程式/组件式、如何传参(优缺点)

最新推荐文章于 2024-11-17 16:25:21 发布

原创最新推荐文章于 2024-11-17 16:25:21 发布 · 691 阅读

CC 4.0 BY-SA版权

本文详细介绍了Vue-Router的两种路由模式——hash和history，以及它们的特点。同时，文章讲解了vue-router的编程式导航和命名路由的跳转方式，并展示了如何通过params和query进行参数传递。此外，还讨论了router-link的用法及其在不同场景下的应用。

vue-router （两种路由模式、编程式/组件式、如何传参(优缺点)

veu-router的两种路由模式：hash 和 history

为什么要有 hash 和 history？

对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。
为了达到这一个目的，浏览器提供了两种路由模式，就是hash 和 history。

1.hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

2.history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）

vue-router跳转方式

第一种跳转方式：编程式导航

{path: '/news', component: BYNews},
	this.$router.push({path:'news'});
	带参：
	{path: '/newDetail/:aid', component: BYNewDetail},
	this.$router.push({path:'/newDetail/495'});

第二种跳转方式：命名路由

{path: '/news', component: BYNews,name:'news'},
    this.$router.push({name:'news'});
    带参：
    this.$router.push({name:'news',params:{userId:123}});

router-linke

<router-link to="xxx" tag=" ">
//  将原本用a标签跳转的功能用router-link实现
//  to是指要跳转到的目录，tag是这个点击跳转标签的样式，可以是li的样式等等

router-link-exact-active: 路由完全匹配，当前选中
router-link-active: 路由不完全匹配
to: 表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<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>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

vue-router路由传参

1.params传参。用this.$route.params.id打印出来即可。

2.路由属性配置传参可以用this.$route.params.id来获取到 id的值。

3.query传参建议解决页面刷新参数丢失问题用此方法解决。

第一种传递参数：name传参
两步完成name传参并显示在模板中；
第一在router/index.js中配置name属性，
	routes: [
	   {
	   path: '/',
	   name: 'HelloWorld',
	   component: HelloWorld
	   },
	]

第二步在src/App.vue接收{{ $route.name }}

第二种参数传递方式 通过<router-link>标签中的to传递
首先在src/App.vue中添加
<router-link :to="{name:'hello',params:{userName:'冬天'}}">hello</router-link>
然后在router/index.js中添加name

{
	path: '/hello',
	name: 'hello',
	component: hello,
	alias: '/dongtian' //别名
},

最后在hello.vue页面接收<h2>{{ $route.params.userName}}</h2>

在这里插入代码片第三种 利用rul传递参数
首先在router/index.js路由中以冒号的形式传递参数，配置路由如下
{
path: '/params/:Id(\\d+)/:title', //只能是数字
component: params
}

然后在params模块利用$route接收参数
<p>Id: {{ $route.params.Id}}</p>
<p>title: {{ $route.params.title}}</p>
最后在src/App.vue模块中的 <router-link>标签中利用rul传值