vue-router (持续更新中)

162 阅读5分钟

vue-router是单独的第三方插件,需要单独安装。 vue的设计就是这样。 vue-router 和 vuex 是作为第三方插件,存在的。

1.vue-router入门

安装vue-router vue-router是一个插件包,所以我们还是需要用npm来进行安装的。打开命令行工具,进入你的项目目录,输入下面命令。

npm install vue-router --save-dev

如果你安装很慢,也可以用 cnpm 进行安装,如果你在使用 vue-cli 中已经选择安装了 vue-router ,那这里不需要重复安装了。

(1) 解读 src/router/index.js 文件 我们用 vue-cli 生产了我们的项目结构,你可以在 src/router/index.js 文件,这个文件就是路由的核心文件,我们先解读一下它。

import Vue from 'vue'                    // 引入Vue
import Router from 'vue-router'          // 引入vue-router
import Hello from '@/components/Hello'   // 引入根目录下的Hello.vue组件

Vue.use(Router)          // Vue全局使用Router

export default new Router({
    routes: [                   // 配置路由,这里是一个数组
        {                       // 每一个链接都是一个对象
            path: '/',          // 链接路径
            name: 'Hello',      // 路由名称
            components: Hello   // 对应的组件模板
        }
    ]
})

增加一个Hi的路由和页面:

import Hi from '@/components/Hi'
export default new Router({
    routes: [
        {
            path:'/',
            name: 'Hello',
            component: Hello
        }, {
            path: '/hi',
            name: 'Hi',
            component: Hi
        }
    ]
})

2.在组件中使用

vue-router一共有两个:

<router-link>  
<router-view>  

我们需要在页面上设置导航链接,我们只要点击就可以实现页面内容的变化。制作链接需要 <router-link>标签,我们先来看一下它的语法。

<router-link to="/">首页</router-link>

明白了 <router-link>的基本语法,我们在 src/App.vue 文件中的template里加入下面代码,实现导航。

<p>导航:
    <router-link to="/">首页</router-link>
    <router-link to="/hi">Hi页面</router-link>
</p>

3.vue-router配置子路由

我们这节课学习一下子路由的路由方式,也叫子路由。
子路由的情况一般用在一个页面有他的基础模板,然而它下面的页面都隶属于这个模板,只是改变部分样式。

(1) 改造App.vue的导航代码

App.vue代码:

<p>导航:
    <router-link to="/">首页</router-link> |
    <router-link to="/hi">Hi页面</router-link> |
    <router-link to="/hi/hi1">-Hi页面 1</router-link> |
    <router-link to="/hi/hi2">-Hi页面 2</router-link>
</p>

(2) 改写 components/Hi.vue 页面 把 Hi.vue 改成一个通用的模板,加入 <router-view>标签,给子模板提供插入位置。
"Hi 页面 1" 和 "Hi 页面 2" 都相当于 "Hi 页面"的子页面,有点像继承关系。 我们在"Hi页面"里加入 <router-view> 标签。 components/hi.vue 代码:

<template>
    <div class="hello">
        <router-view class="aaa"></router-view>
    </div>
</template>

(3) 修改 src/router/index.js 代码:

import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        }, {
            path: '/hi',
            component: Hi,
            children: [
                {path: '/', component: Hi},
                {path: 'hi1', component: Hi1},
                {path: 'hi2', component: Hi2}
            ]
        }
    ]
})

4.vue-router如何参数传递

开发中,参数的传递是个最基本的业务需求。 点击导航菜单时,跳转页面上能显示出当前页面的路径,来告诉用户你想在所看的页面位置(类似于面包屑导航)。 (1) 用name传递参数 两步完成用name传值并显示在模板里: 在路由文件 src/router/index.js 里配置 name 属性。

routes: [
    {
        path: '/',
        name: 'Hello',
        component: Hello
    }
]

模板里 (src/App.vue) 用 $route.name 的形式接收,比如直接在组件中显示:

<p>{{ $route.name }} </p>

(2) 通过 <router-link>标签中的 to 传参 其实我们多数传参是不用name进行传参的,我们用<router-link>标签中的to属性进行传参,需要你注意的是这里的to要进行一个绑定,写成:to。先来看一下这种传参方法的基本语法。

<router-link :to="{name:xxx, params: {key:value}}">valueString</router-link>

这里的to前边是带冒号的,然后后边跟的是一个对象形式的字符串。 我们改造一下我们的src/App.vue里的<router-link>标签,我们把hi1页面的<router-link>进行修改。

<router-link :to="{name:'hi1', params:{username:'jspang'}}">Hi页面1</router-link>

把src/router/index.js文件里给hi1配置的路由起个name,就叫hi1

{path:'/hi1',name:'hi1', component:Hi1},

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收。

{{$route.params.username}}

5.单页面多路由区域操作

例如我们在src/App.vue里加上两个<router-view>标签。我们用vue-cli建立新的项目,并且打开了src目录下的App.vue文件,在<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式。

<router-view ></router-view>
<router-view name="left" style="float:left;width:50%; height:300px;"></router-view>
<router-view name="right" style="float:right;width:50%; height:300px;"></router-view

现在的页面中有了三个<router-view>标签,也就是说我们需要在路由里配置这三个区域,配置主要是在components字段里进行。

import Vue from  ‘vue’
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      components: {
        default:Hello,
        left:Hi1,
        right:Hi2
      }
    },{
      path: '/Hi',
      components: {
        default:Hello,
        left:Hi2,
        right:Hi1
      }
    }
 
  ]
})

最后在App.vue中配置我们的<router-link>就可以了。

<router-link to=”/”>首页</router-link> |
<router-link to=”/hi”>Hi首页</router-link> |

6.vue-router利用url传递参数

总结:在组件中常见用法

this.$route.path      //   

this.$router.push()        // 

vue-router 源码解析