vue路由配置

vue路由配置

路由链接

1、安装

npm install vue-router --save

2、在main.js里引入并Vue.use(VueRouter)

import VueRouter From 'vue-router'
Vue.use(VueRouter)

3、配置路由

​ ①创建组建引入组建

import Home from './components/Home.vue'

​ ②定义路由

const routes = [
    { path: '*', redirect: '/home' }, // 重定向，没有path时默认指向home组建
    { path: '/home', component: Home },
    { path: '/bar', component: Bar}
]

​ ③实例化VueRouter

const router = new VueRouter({
    routes // (编写) 相当于 routes: routes
})

​ ④挂载

new Vue ({
    el: '#app',
    router,
    render: h => h(App)
})

​ ⑤根组件的模板里放上

<router-view></router-view>

​ ⑥根据按钮跳转时

<router-link to="/home">首页</router-link>

***注意动态路由传值

（一）

1、配置动态路由

const routes = [
    /*动态路径参数以冒号开头*/
    { path: '/home/:id', component: Home },
]
/*跳转时拼接路由*/
<router-link ：to="'/home/'+key">首页</router-link>

2、在对应界面获取动态路由的值

this.$route.params

（二）

get方法获取动态路由的值

<router-link ：to="'/home?id='+key">首页</router-link>

在对应界面获取动态路由的值

this.$route.query

另外的路由跳转方式

编程式导航路由跳转（通过javaSript直接跳转）

this.$router.push({ path: 'home'})
this.$router.push({ path: 'home/id'}) /*动态跳转*/

命名式导航路由

const routes = [
    { path: '/home', component: Home， name:'home' },
]
this.$router.push({ name: 'home'})
this.$router.push({ name: 'home', params: { id:123}}) /*动态跳转*/