vue.js-路由

Posted 2020-11-01 风随心动*

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

};

},