命名路由
const routes = [
{
// 路由参数,user_id
path: "/user/:user_id",
// 给路由起别名
name: "user",
component: User,
// 使用props 传参
props: true,
}
]
使用路由
<div>
<router-link to="/">主页</router-link>
<!--params 传参数-->
<router-link :to="{name: user, params: {user_id:'00123'}}">用户页</router-link>
<router-link to="/sports">体育</router-link>
</div>
<div>
<router-view></router-view>
</div>
user页面
<div class="user">
<h3>user 页面</h3>
<p>{{$route.params.user_id}}</p>
</div>
props 传参
**注意使用props传参,在路由规则开启 ** props:true,
{path: '/user/:user_id', component: User, props:true}
<router-link :to="{path: '/user/:user_id', params: { id: 'a2b3c2' } }"
>关于</router-link
>
<template>
<div class="user">
<h3>user 页面</h3>
<p>{{user_id}}</p>
</div>
</template>
<script>
export default {
props: ["user_id"]
};
</script>
路由重定向
用户访问/a
时,url会替换成/b
,然后匹配路由为/b
const router = new VueRouter({
routes: [
{path: '/a', redirect: '/b'}
]
})
获取路由中的参数
- 传参
<router-link to="/home?name=jack&age=18">主页</router-link>
// 方法二
<router-link :to="{path: '/home', query: (name:'jack',age:18)}">用户页</router-link>
- 取出传参
<template>
<div class="home">
<h3>home 页面</h3>
<!--$route.query 是个对象-->
<p>我叫{{$route.query.name}},年龄{{$route.query.age}}</p>
</div>
</template>
编程式导航
methods: {
handleClick(){
this.$router.push("/about") 跳转到指定hash地址,并增加一条历史记录
this.$router.replace("/about") 跳转到指定hash地址,并替换一条历史记录
this.$router.go(-1) // 后退 括号中 数值
this.$router.back() // 后退
}
}
this.$router.push("/about")
跳转到指定hash地址,并增加一条历史记录this.$router.replace("/about")
跳转到指定hash地址,并替换一条历史记录this.$router.go(-1)
后退 括号中 数值this.$router.back()
后退