路由跳转的方式
1、编程式导航
除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现
(1) 前进和后退this.router.go(1)：功能跟我们浏览器上的后退和前进按钮一样，这在业务逻辑中经常用到。比如条件不满足时，我们需要后退。
app.vue文件里加入一个按钮，按钮并绑定一个goback( )方法
<button @click="goback">后退</button>
<script>
export default {
name: 'app',
methods:{
goback(){
this.$router.go(-1);
}
}
}
</script>
(2) 编程式导航都作用就是跳转，比如我们判断用户名和密码正确时，需要跳转到用户中心页面或者首页，都用到这个编程的方法来操作路由。this.$router.push
export default {
name: 'app',
methods:{
goback(){
this.$router.go(-1);
},
goHome(){
// 字符串
this.$router.push('/');
}
}
}
2、声明式导航
（1）方式1
<template>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">Go to root</router-link>
<router-link to="/demo">Go to demo</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
（2）方式2
<router-link :to="`/film/edit/${scope.row.filmId}`"> //这种方式就是跟to一样，只是第一种方式to的后面跟的是一个死值，这里的值可以变，建议使用这种方式。
<el-button size="small" type="primary" icon="el-icon-edit" circle class="del"></el-button>
</router-link>
3、子路由
export default new Router({
routes: [ //配置路由，这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'Hello', //路由名称，
component: Hello //对应要显示的组件
},
{ //每一个链接都是一个对象
path: '/demo', //链接路径
name: 'Demo', //路由名称，
component: Demo //对应要显示的组件
},
{
// 对某个路由使用子路由，那么需得在Hi1组件内使用 <router-view></router-view>，否则切换
// 了子路由也无法显示出来
path:'/h1',
name:'Hi1',
component:Hi1, // 当访问 /h1的时候显示Hi1这个组件
children:[
{path:"/", component:Hi1}, // 当访问 /h1的时候<router-view></router-view>被这个组件替换，就会有2个Hi1组件内容。一般不这么写，一般这么写{ path: '', component: Hi1 },
{path:"h2", component:Hi2}, // 当 /h1/h2 匹配成功，Hi2会被渲染在 Hi1 的 <router-view> 中
{path:"h3", component:Hi3} // 当 /h1/h3 匹配成功，Hi3会被渲染在 Hi1 的 <router-view> 中
]
}
]
})
4、动态路由
. 动态路由的匹配和获取值
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
---------在User组件中可以通过下面方式去拿------------
{{$route.params.id}}
. 动态路由的跳转
第一种声明式动态路由跳转
<!-- 动态路由通过命名路由跳转 /user/123 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
第二种编程式导航的动态路由跳转
const userId = '123'
// 对象，命名的动态路由
router.push({ name: 'user', params: { userId }}) // -> /user/123
// 如果提供了 path，params 会被忽略
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
5、路由重定向
重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
重定向的目标也可以是一个命名的路由：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
6、路由传参
一、 （1）
传递参数：用$router
<!-- test-vue-router页面 -->
<template>
<div>
<a @click="routerTo()">query传参</a>
</div>
</template>
<script>
export default {
methods: {
routerTo() {
this.$router.push({
name: `TestVueRouterTo`,
params: {
page: '1', code: '8989'
}
})
}
}
}
</script>
（2）
接受参数：用$route，少个r,注意啦
<!-- test-vue-router-to页面 -->
<template>
<div>
</div>
</template>
<script>
export default{
data() {
return {
page: '',
code: ''
}
},
created() {
this.getRouterData()
},
methods: {
getRouterData() {
this.page = this.$route.params.page
this.code = this.$route.params.code
console.log('page', this.page)
console.log('code', this.code)
}
}
}
</script>
二、query：最好也用name来识别，保持与params一致性，好记了，路径传参
query传参：
传递参数页
<!-- test-vue-router页面 -->
<template>
<div>
<a @click="routerTo()">query传参</a>
</div>
</template>
<script>
export default {
methods: {
routerTo() {
this.$router.push({
name: `TestVueRouterTo`,
// 只是把query改了，其他都没变
query: {
page: '1', code: '8989'
}
})
}
}
}
</script>
接受参数
<!-- test-vue-router-to页面 -->
<template>
<div>
</div>
</template>
<script>
export default{
data() {
return {
page: '',
code: ''
}
},
created() {
this.getRouterData()
},
methods: {
getRouterData() {
// 只是改了query，其他都不变
this.page = this.$route.query.page
this.code = this.$route.query.code
console.log('page', this.page)
console.log('code', this.code)
}
}
}
</script>
路由传参的三种方式
方案一：
getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
方案一，需要对应路由配置如下：
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。
$route.params.id
方案二：
父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。
{
path: '/describe',
name: 'Describe',
component: Describe
}
子组件中: 这样来获取参数
$route.params.id
方案三：
父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
this.$router.push({
path: '/describe',
query: {
id: id
}
})
对应路由配置：
{
path: '/describe',
name: 'Describe',
component: Describe
}
对应子组件: 这样来获取参数
$route.query.id
网友评论