Vue脚手架开发 Vue2基础 VueRouter的基本使用 vue-router路由案例

vue-router路由

Vue脚手架开发，创建项目：https://blog.****.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 = false

new 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>