vue-router路由

Vue脚手架开发，创建项目：https://blog.csdn.net/c_s_d_n_2009/article/details/144973766

Vue Router，Vue Router | Vue.js 的官方路由，Vue.js 的官方路由，为 Vue.js 提供富有表现力、可配置的、方便的路由。

安装： npm i vue-router@版本，如果是vue2安装@3，如果是vue3安装@4。

简单应用案例

main.js

import Vue from 'vue'
import App from './App.vue'// 引入VueRouter
import VueRouter from 'vue-router'
// 引入路由器
import router from './router'
// 应用插件
Vue.use(VueRouter)import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);Vue.config.productionTip = falsenew Vue({render: h => h(App),router: router
}).$mount('#app')

router/index.js

import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'// 创建并暴露一个路由器
export default new VueRouter({routes: [{path: '/about',component: About},{path: '/home',component: Home}],
})

components/About.vue

<template><div class="hello"><h1>{{ msg }}</h1><p style="color: #f0f;">about</p></div>
</template><script>
export default {name: 'about',props: {msg: String}
}
</script>

components/Home.vue

<template><div class="hello"><h1>{{ msg }}</h1><p style="color: #0ff;">home</p></div>
</template><script>
export default {name: 'home',props: {msg: String}
}
</script>

App.vue

<template><div id="app"><router-link to="/about">About</router-link>|<router-link to="/home">Home</router-link><div><!-- 指定组件的呈现位置 --><router-view></router-view></div></div>
</template><script>export default {name: 'App',components: {}
}
</script>

路由传参和跳转

跳转时传递参数： 

// 使用查询参数（query）
this.$router.push({ name: 'User', query: { userId: 10001 } });
// 使用动态路由参数（params）
this.$router.push({ name: 'User', params: { userId: 10001 } });

跳转后接收参数：

created() {// 使用查询参数（query）console.log(this.$route.query.userId); // 使用动态路由参数（params）console.log(this.$route.params.userId); 
}

查询参数与动态路由参数：

模板中传参：

<!-- 查询参数 -->
<router-link :to="{ name: 'User', query: { userId: 10001 } }">Go to User</router-link>
<!-- 动态路由参数 -->
<router-link :to="{ name: 'User', params: { userId: 10001 } }">Go to User</router-link>
<!-- 混合使用- ->
<router-link :to="{ name: 'User', params: { userId: 10001 }, query: { filter: 'active' } }">Go to User</router-link>