vue-router路由管理器的使用

一.vue-router路由入门

1.什么是router(路由)?

这里的路由并不是指我们平时所说的硬件路由器,在vue里是指单页应用的路径管理器,再通俗点来说,vue-router就是我们WebApp的链接路径管理系统。
有的小伙伴会有疑虑，为什么我们不能像原来一样直接用标签编写链接哪？因为我们用Vue作的都是单页应用，就相当于只有一个主的index.html页面，所以你写的标签是不起作用的，你必须使用vue-router来进行管理。
接着上一篇vue-cli里的vueclitest继续操作:
因为vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令:

cnpm install vue-router --save-dev

2.打开src/router/index.js文件可以看到以下内容:

import Vue from 'Vue';//引入Vue
import VueRouter from 'vue-router';//引入vue-router,这里的对象名可以自己定义,但定义后下面全局包括new都要使用同一个名字
import HelloWorld from "@/component/Hello";//引入HelloWorld.vue组件

Vue.use(VueRouter);//全局使用vue-router
export default new VueRouter({//暴露一个路由对象,相当于官网里面的3.实例化路由对象
routes:[//路由配置,是数组
{//每一个规则都是一个对象
path:'/',//链接路径
name:''HelloWorld'',//路由名字
component:HelloWorld //对应的组件模板
}
]
})

上面的path的意思是:在根目录下关联的是HelloWorld这个组件.new VueRouter是实例化路由对象

3.根据上面的案例,我们再写一个hi的组件:

第一步:根据HelloWorld.vue,我们创建一个hi.vue组件,内容如下:

<template>
    <div>
        <h3>{{message}}</h3>
    </div>
</template>
<script>
 export default {
     name:'hi',
     data() {
         return {
             message:'我是hi页面'
         }
     },
 }
</script>
<style>

</style>

回到router/index.js页面
第二步:引入hi.vue组件

import hi from "../components/hi.vue"

第三步:再增加一个路由规则:

{
path:"/hi",
name:'hi',
component:hi
}

最终打开http://localhost:8080/#/hi,显示如下:
vue-router路由管理器的使用

4.使用router-link制作一个简单的导航

回到App.vue大组件页面:增加两个router-link标签,使用to分别跳转到首页和hi页面.
vue-router路由管理器的使用
最后实现效果:

5.附上官网路由案例:

操作步骤:

0.定义一个html结构:

    <div id="app">
        <!-- 入口:使用router-link组件来导航,它会解析为a标签 -->
        <router-link to="/man">男</router-link>
        <router-link to="/women">女</router-link>

        <!-- 出口:渲染内容 -->
        <router-view></router-view>
    </div>

先导入vue和vue-router文件,可以自己下载在本地导入,但前后文件不能颠倒,要先导入vue在vue-router,不然会报错,官方在线导入如下:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

1.写组件

//也可以使用import XX from './XX'从其它文件中引进来
      const Man= {//对象
            template:'<div>我是男生</div>'
        };
        const Women={
            template:'<div>我是女生</div>'
        };

2.写路由规则(配置路由单词用的是routes),里面写path路径和component组件

        const routes =[//数组,里面存对象,可以是多个对象,中间用逗号隔开
            {
                path:"/man",//写to的路径名
                component:Man//写组件名
        },
        {
            path:"/women",
            component:Women
        }
        ]

3.实例化路由对象,传入定义的路由规则(路由对象单词是用的router)

    const router =new VueRouter({//里面传入对象
            routes//相当与于routes:routes
            // routes:routes123//属性名一定要routes,这是作者规定的,值名可以自己定义和路由规则一样就可以了

        })

4.实例化Vue对象,把元素和路由对象传入到Vue实例中

        let app=new Vue(
            {
                el:"#app",
                router //路由对象
            }
        )

案例效果:
vue-router路由管理器的使用

二.制作一个子路由(项目中经常用,很重要)

子路由一般用在一个页面有自己的基础模板,然后在它的下面的页面都属于这个模板,只是部分改变样式.
如下图,我们要实现首页下面拥有首页样式的两个子页面.
vue-router路由管理器的使用
操作步骤如下:
1.在App.vue入口文件里面,增加三个首页,子页面1,子页面2的router-link标签,在to属性里,写上各自要跳转的地址.

<router-link to="/">首页</router-link>
<router-link to="/hi1">子页面1</router-link>
<router-link to="/hi2">子页面2</router-link>

2.在components文件夹里创建两个hi1和hi2组件
vue-router路由管理器的使用

3.回到router/index.js里,在路由文件里引入上面两个组件;

import hi1 from "../components/hi1";
import hi2 from "@/components/hi2.vue"

4.在路由规则里加上children里用path(关联router-link的to值)和component(关联组件名)绑定;
vue-router路由管理器的使用
5.回到components/main.vue首页,将子组件的出口用router-view渲染在主页面即可.

三.vue-router如何参数传递

1.用name传递参数(这种方法很少用)

分为两步:
a.在src/router/index.js里面配置name属性;
b.在src/App.vue模板里用$route.name的形式接收就好;

vue-router路由管理器的使用
注意点:如果路由里面还有子路由,不用写name,如果写name控制台会提示.如下图(这图相当于一个面包屑导航):

2.利用router-link中的to标签(这种方法常用,而且可以传递多个值)

比如有一个需求:我们要将App.vue里面的username和id传递到模板,最后在页面中显示.操作方法如下:
a.在App.vue页面的router-link标签里用to进行绑定

<router-link :to={name:XXX,params:{username:'JSPang',id=888}}>

说明:
name:要和我们在路由规则文件中的name值保持一致;
vue-router路由管理器的使用
params:这里就是我们要传的参数,是对象形式,里面可以传递多个值.
b.回到要hi11.vue组件模板,在模板里用插值模板的$route.params.username进行接收

{{$route.params.username}}

整体操作图如下:
vue-router路由管理器的使用
以上路由传参主要是使用第二种方法,
同时总结路由中name的两个作用:
1.用name来传递参数;
2.在router-ling的to传参时起到名称的作用.