import end this theme str The ram class color

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-路由