(通过js代码实现跳转)
按照path进行跳转
第一步:
在app.vue中(前提是规则已经配置好)
<template>
<div id="app">
App组件
<button @click='login'>跳转</button>
<!--路由出口-将来匹配的组件渲染地方-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
login () {
this.$router.push('/login')//点击按钮实现跳转功能,$router后面是个方法
}
}
}
</script>
实现回退,在跳转的那个组件中实现回退
this.$router.push('/article/2')
组件获取参数: this.$route.params.id
this.$router.push('/article?id=2&name=zs')
或写完整写法 this.$router.push({path: '路径', query: {参数1:值,参数2:值,...}})
路由规则path -> /路径
组件获取 this.$route.query.id
按照命名路由进行跳转
1 字符串形式
?this.$router.push('/article/2')
2 对象形式 注意 path不能与params一起使用
this.$router.push({ path: '/article/5' })
? ? this.$router.push('/article?id=2')
?完整写法
? ?this.$router.push({
? ?path: '/article',
?查询参数
? ?query: {
? ?id: 1
? }
? ?})
?跳转
? ?this.$router.push({
? ?name: 'articleDetail',
? ?动态传参
? ?params: {//如果查询参数用query
? ?id: 10 //规则里面是这种形式带id的/article?id
? ?}
? ?查询传参
? ? params: {
? ?id: 10 //规则里面的id随意换
? ?}
})