三分钟带你走进Vue Router

115 阅读 0 评论 76 点赞

我是靠谱客的博主复杂美女，这篇文章主要介绍三分钟带你走进Vue Router，现在分享给大家，希望可以做个参考。

router-link(页面跳转)

我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

<router-link to="/about">

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
<template>
	<div id="main">
		<router-view class="views has-tabs" />
		<div class="tabs">
			<router-link class="links ihome" to="/">首页</router-link>
			<router-link class="links icate" to="/category">分类</router-link>
			<router-link class="links iball" to="/ball">米圈</router-link>
			<router-link class="links icart" to="/cart">购物车</router-link>
			<router-link class="links iuser" to="/user">我的</router-link>
		</div>
	</div>
</template>

`router-view`

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

路由配置

router/index.js

复制代码

1
2
3
4
5
{
   path:"/about",
   name:"About",
   component:"About"
}

路由传参

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//引入文件
import User from '../views/User.vue'
import Produce from '../views/Produce.vue'
//定义路由
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/produce/:id',
    name: 'produce',
    component: Produce
  }
]

编程路由跳转

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
<template>
	<div>我是产品页面</div>
	<p>{{$route.params.id}}</p>
	<h3>通过js方式跳转页面</h3>
	<button @click="$router.back()">返回</button>
	<button @click="$router.go(-1)">返回</button>
	<button @click="$router.forward()">前进</button>
	<button @click="$router.go(1)">前进</button>
	<br />
	<button @click="$router.push('/about')">关于</button>
	<button @click="$router.replace('/about')">关于-不留历史记录</button>
</template>