router vue 动态改变url_vue: router-link 动态路由

动态路由:

根据路由的不同请求不同的数据。

$router 获取vue-router实例

$route 获取url的详细信息

:id表示在user后任意参数都可以访问到对应组件，但是必须有" / "。

如: localhost:8080/user/1

// router.js文件import Vue from 'vue'

import Router from 'vue-router'

import Home from './components/home'

import User from './components/user'

Vue.use(Router)

export default new Router({

mode: 'history',

routes: [

{

path: '/',

component: Home

},

{

path: '/user/:id',

component: User,

}

]

})

打印this.$route

我是USER页

跳转到home

export default {

data() {

return {

id: this.$route

}

},

created() {

console.log(this.$route)

},

methods: {

goToHome() {

this.$router.push('/')

}

}

}

h3 {

color: #3eede7;

}

id存在$route.parms.id中

然后我们把它渲染在template中

header文件: 直接在url中修改id会变，但是在切换组件中不会变。

HOME

user1

user2