vue.js-路由

时间:2021-03-01 07:46:28
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
};
},