Vue路由（VueRouter）的使用，以及路由组件进行参数传递

最新推荐文章于 2022-07-28 15:18:49 发布

神仙刘

最新推荐文章于 2022-07-28 15:18:49 发布

阅读量408

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_41936090/article/details/112134197

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、什么是VueRouter？

VueRouter是Vue的生态系统之一，是Vue的核心插件，能更好的完成单页面多视图的功能。
简单来说就是一个html页面有多个视图，而通过VueRouter可以实现我们需要显示哪块视图，就显示哪块视图，并且可以做到代码复用，提高编码效率。

二、使用VueRouter

首先需要先引入相关Vue，和VueRouter相关文件，（如果单独引入VueRouter也是不能使用的），为了好看我还使用了bootstrap。

安装

CDN：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

npm方式：

		$ npm install vue
		npm install vue-router
		$ npm install bootstrap@3

其实单独下载下来，再拷贝到项目里也是可以的（npm下载一堆乱七八糟的东西）

编码

这里不使用模块化机制编程，也就是使用Vue脚手架。
定义 (路由) 组件。
定义路由
创建 router 实例，然后传 routes 配置
创建和挂载根实例。（通过 router 配置参数注入路由，从而让整个应用都有路由功能）

<body>
    <div id="app">
        <!--导航栏-->
        <div class="container-fluid col-md-8 col-md-offset-3" style="margin-bottom: 70px;margin-top: 18px">
            <ul class="nav nav-pills ">
                <!--这里使用三目运算符，给class动态绑定类名，从而达到给导航栏切换样式的效果-->
                <li role="presentation" :class="showActive=='index'? 'active col-md-3':'col-md-3'" @click="changeActive('index')">
                    <!-- 使用 router-link 组件来导航. -->
                    <!-- 通过传入 `to` 属性指定链接. -->
                    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                    <router-link to="/index">主页</router-link>
                </li>
                <li role="presentation" :class="showActive=='empList'? 'active col-md-3':'col-md-3'" @click="changeActive('empList')">
                    <router-link to="/emplist">员工管理</router-link>
                </li>
                <li role="presentation" :class="showActive=='setting'? 'active col-md-3':'col-md-3'" @click="changeActive('setting')">
                    <router-link to="/setting">系统设置</router-link>
                </li>
            </ul>
        </div>

        <!--内容-->
        <div class="container-fluid col-md-6 col-md-offset-3">
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
    </div>

    <!--首页的组件-->
    <template id="index">
        <div>
            <div class="jumbotron">
                <h1>Hello, world!</h1>
                <p>欢迎来到首页</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
            </div>
        </div>
    </template>
    <!--员工管理页面-->
    <template id="emplist">
        <div>
            <table class="table table-striped table-responsive table-bordered table-hover" style="text-align: center">
                <tr>
                    <td>雇员编号</td>
                    <td>雇员姓名</td>
                    <td>雇员性别</td>
                    <td>雇员薪资</td>
                    <td>雇员电话</td>
                    <td>编辑</td>
                </tr>
                <tr>
                    <td>1001</td>
                    <td>张三</td>
                    <td>男</td>
                    <td>3300</td>
                    <td>18989878962</td>
                    <td>
                        <a class="button btn-sm">修改</a>
                        <a class="button btn-sm btn-danger">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>1002</td>
                    <td>李四</td>
                    <td>男</td>
                    <td>3100</td>
                    <td>13498759876</td>
                    <td>
                        <a class="button btn-sm">修改</a>
                        <a class="button btn-sm btn-danger">删除</a>
                    </td>
                </tr>
                <td>1003</td>
                <td>王芳</td>
                <td>女</td>
                <td>3400</td>
                <td>17773687787</td>
                <td>
                    <a class="button btn-sm">修改</a>
                    <a class="button btn-sm btn-danger">删除</a>
                </td>
            </table>
        </div>
    </template>
    <!--系统设置页面-->
    <template id="setting">
        <div>
            <h1 class="h1">系统设置</h1>
        </div>
    </template>
<script>
// 1. 定义 (路由) 组件。
    /*  全局组件注册方式
        Vue.component("index",{
            template: "#index"
        })*/
    //以下是局部组件注册方式
    let index = {
        template : "#index"
    }
    let emplist ={
        template: "#emplist"
    }
    let setting = {
        template:"#setting"
    }

// 2. 定义路由
    let rules =  [
            {path:"/index",component:index},
            {path:"/emplist",component:emplist},
            {path:"/setting",component:setting}
        ] ;
// 3. 创建 router 实例，然后传 `routes` 配置
    let router=new VueRouter({
        routes:rules,
        mode: 'history'//这个配置是将访问路径更美观
    })

// 4. 创建和挂载根实例。
    new Vue({
        //控制区域
        el:"#app",
        //通过 router 配置参数注入路由，从而让整个应用都有路由功能
        router,
        data:{
            showActive : "index"
        },
        methods:{
            //通过导航栏点击事件，修改当前data中showActive的值为点击事件传来的值，从而达到修改导航栏样式
            changeActive(value){
                this.showActive = value;
            }
        },
        components:{//组件挂载到这里
            index,
            emplist,
            setting
        }
    })
</script>
</body>

效果图：

三、VueRouter传递参数

第一种方式（传统方式）

<router-link>标签通过？拼接参数

<router-link to="/emplist?name=张三&id=1001">员工管理</router-link>

在对应组件中的created()方法中通过this.$route.query获取路由传递的参数

    let emplist ={
        template: "#emplist",
        created(){
            console.log(this.$route.query.name);
        }
    }

效果：
在这里插入图片描述

第二种方式（RestFul风格）

<router-link>标签通过 / 拼接参数

<router-link to="/setting/张三/1001">系统设置</router-link>

在路由中进行参数绑定

    let rules =  [
            {path:"/index",component:index},
            {path:"/emplist",component:emplist},
            {path:"/setting/:name/:id",component:setting}
        ] ;

在对应组件中的created()方法中通过this.$route.params.name获取参数。（注意，与上面的方式不同，这里$route后面的是.params）

    let setting = {
        template:"#setting",
        created(){
            console.log(this.$route.params.name);
        }
    }

效果图：
在这里插入图片描述
通过观察路径和输出可以发现，确实是使用RestFul风格完成了路由组件的传参

基于官方文档创作
官方链接：https://router.vuejs.org/zh/guide/#html

为了把视频转换为动态图，我专门下载了pr，完事还破解了，而下载破解安装包我还特意百度如何避免百度云限速，花了我不少时间......
不得不说B站是个好东西！这两样东西都是在B 站搞好的。下面是PS和PR百度云资源：

PS链接

 PR链接
提取码均为：1234

神仙刘

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue路由（VueRouter）的使用，以及路由组件进行参数传递

一、什么是VueRouter？ VueRouter是Vue的生态系统之一，是Vue的核心插件，能更好的完成单页面多视图的功能。简单来说就是一个html页面有多个视图，而通过VueRouter可以实现我们需要显示哪块视图，就显示哪块视图，并且可以做到代码复用，提高编码效率。二、使用VueRouter 首先需要先引入相关Vue，和VueRouter相关文件，（如果单独引入VueRouter也是不能使用的），为了好看我还使用了bootstrap。安装CDN：<script src="h
复制链接

扫一扫