本文环境: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怎么设置路由的详细内容,更多请关注易知道|edz.cc其它相关文章!