vue的跳转路由

vue的路由跳转

准备工作

/router/index.js

import VueRouter from 'Vue-router'
import Vue from 'vue'
Vue.use(VueRouter)   
const routes = []   //route对象（填写路由）
const router = new VueRouter({routes})
export default router;

1.通过在$router更改

​ vue路由路径可以通过Vue中的router对象来进行更改路由路径，在new Vue()时我们会传入一个router对象，通过这个router对象我们就可以进行路由的更改和切换。

​ 使用router.push和router.replace其实这个内部是调用了history.pushState()方法和history.replaceState()，也可以通过router.go和router.back来控制路径的回退。

//通过push进行路径的压栈，通过改方法添加的路径可以在browser中通过后退键放回
//这里的$router对象是对应上面new VueRouter({routes}) 
//在App.vue中用this.$router可以获得注册的router对象


this.$router.push('/home')
//通过replace修改路由路径，是直接的更改
this.$router.replace('/home')
//通过go进行路径的回退（回到上一个浏览页面）
this.$router.go(-1)
//back可以完成一样的效果
this.$router.back()
//通过go进行路径的前进（回到下一个浏览页面）
this.$router.go(1)

2.在router-link中指定跳转路径

可以通过router-link的to属性指定跳转路径。

先编写路由

const routes = [
    {   
        path:'',
        //重定向将''->'/home'
        redirect:'/home'
    },
	{   
        path:'/home',
        component:Home
    }
]

调用

<!--这个跟router.push('/home')一样-->
<router-link to="/home">首页</router-link>

<!--如果想使用replace-->
<router-link to="/home" replace>首页</router-link>

<!--渲染位置-->
<router-view></router-view>

关于其他vue router的其他更改属性，可以查阅官方文档：https://router.vuejs.org/zh/api/#router-link

3.动态路由

vue里面有动态路由，允许用户动态更改路由信息。通过（：routename）来标识路由的动态地址

先配置路由

在配置路由时，如果使用动态路由那么就需要使用（：）号来表示动态路径。

import User from '../component/User'
import VueRouter from 'Vue-router'
const routes =[
	{   
        //:ID是动态的
        path:'/user/:ID',
        component:user
    }
]

const router =new VueRouter({
    routes,
    mode:'history'
})

调用

配置好动态路由，那么我们就可以对路由进行动态的路径拼接啦。我们通过v-bind来捆绑to属性，然后进行字符串拼接。userID对应到上面路由配置的地方。

<!--'/user'和userID（获取的ID）进行拼接-->
<router-link :to="'/user'+userID">我的</router-link>

获取处于活动状态的route信息

在component/User.vue中，通过$route获取处于活动状态的route

this.$route.params.ID