vue2的跳转路由

vue2的路由跳转

准备工作

/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
    }
]

调用


首页


首页



关于其他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对应到上面路由配置的地方。


我的

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

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

this.$route.params.ID

你可能感兴趣的:(Vue2,vue,javascript)