vue.js怎么设置路由

本文环境：windows7、vue2.9.6，该方法适用于所有品牌的电脑。

vue.js设置路由的方法：

1：编写router.js

import Router from "vue-router"
import Vue from "vue"
import router from "./router/router.vue" // 导入
import component from "./component/component.vue"
import databinding from "./databinding/databinding.vue"
import directive from "./directive/directive.vue"
import eventhanding from "./eventhanding/eventhanding.vue"
import stylebinding from "./stylebinding/stylebinding.vue"
import home from "./home.vue"
Vue.use(Router) // 引用
 
export default new Router({
linkActiveClass: 'active',
routes: [
{ path: '/component', component: component },
{ path: '/databinding', component: databinding },
{ path: '/directive', component: directive },
{ path: '/eventhanding', component: eventhanding },
{ path: '/stylebinding', component: stylebinding },
{ path: '/router/:userId', component: router }, // 路由传值
{ path: '/*', component: home }, // 找不到路由时跳转到这，一般设置为首页
]
})

2:在main.js中注册router

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router.js' //
Vue.use(ElementUI)
new Vue({
el: '#app',
router, // 注册router
render: h => h(App)
})

3:路由跳转传参

<el-button class="btnstyle" @click="routerClick">路由</el-button>
routerClick() { // 传入跳转的参数
const userId = 123456;
this.$router.push({
path: `/router/${userId}`
});
console.log("点击路由按钮");
},

4:接收路由参数

data() {
return {
text: this.$route.params.userId
};
},

以上就是vue.js怎么设置路由的详细内容，更多请关注其它相关文章！

lynch永久会员

打赏 收藏 海报 链接