1节:Vue-router入门
安装vue-router
vue-router是一个插件包,所以我们还是需要用npm来进行安装的。打开命令行工具,进入你的项目目录,输入下面命令。
npm install vue-router --save-dev
解读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', //路由名称,
component: Hello //对应的组件模板
}
]
})
上边的代码中已经对每行都进行了注释,其实在这个路由文件里只配置了一个功能,就是在进入项目时,显示Hello.vue里边的内容代码。
增加一个Hi的路由和页面
对路由的核心文件熟悉后,我们试着增加一个路由配置,我们希望在地址栏输入 http://localhost:8080/#/hi
的时候出现一个新的页面,先来看一下我们希望得到的效果。
看到了效果,我们看一下具体的操作步骤:
- 在src/components目录下,新建 Hi.vue 文件。
- 编写文件内容,和我们之前讲过的一样,文件要包括三个部分
<template><script>
和<style>
。文件很简单,只是打印一句话。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hi',
data () {
return {
msg: 'Hi, I am JSPang'
}
}
}
</script>
<style scoped>
</style>
引入 Hi组件:我们在router/index.js
文件的上边引入Hi组件
import Hi from '@/components/Hi'
增加路由配置:在router/index.js
文件的routes[]数组中,新增加一个对象,代码如下。
{
path:'/hi',
name:'Hi',
component:Hi
}
通过上面的配置已经可以增加一个新的页面了。是不是觉的自己的Vue功力一下子就提升了一个档次。为了方便小伙伴查看,贴出现在的路由配置文件:
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件
import Hi from '@/components/Hi'
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由,这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'Hello', //路由名称,
component: Hello //对应的组件模板
},{
path:'/hi',
name:'Hi',
component:Hi
}
]
})
router-link制作导航
现在通过在地址栏改变字符串地址,已经可以实现页面内容的变化了。这并不满足需求,我们需要的是在页面上有个像样的导航链接,我们只要点击就可以实现页面内容的变化。制作链接需要<router-link>
标签,我们先来看一下它的语法。
<router-link to="/">[显示字段]</router-link>
- to:是我们的导航路径,要填写的是你在
router/index.js
文件里配置的path值,如果要导航到默认首页,只需要写成to=”/”
, - [显示字段] :就是我们要显示给用户的导航名称,比如首页 新闻页。
明白了router-link的基本语法,我们在 src/App.vue文件中的template里加入下面代码,实现导航。
<p>导航 :
<router-link to="/">首页</router-link>
<router-link to="/hi">Hi页面</router-link>
</p>
第2节:vue-router配置子路由
我们上节课初步了解Vue-router的初步知识,也学会了基本的跳转,那我们这节课学习一下子菜单的路由方式,也叫子路由。子路由的情况一般用在一个页面有他的基础模版,然后它下面的页面都隶属于这个模版,只是部分改变样式。我们接着第一节课的实例,在Hi页面的下面新建两个子页面,分别是 “Hi页面1” 和 “Hi页面2”,来实现子路由。
**一、改造App.vue的导航代码 **
我们需要先改造app.vue的导航代码,来实现基本的导航功能。我们用<router-link>
标签增加了两个新的导航链接。
** App.vue代码**
** 二、改写components/Hi.vue页面 **
把Hi.vue改成一个通用的模板,加入<router-view>
标签,给子模板提供插入位置。“Hi页面1” 和 “Hi页面2” 都相当于“Hi页面”的子页面,有点想继承关系。我们在“Hi页面”里加入<router-view>
标签。
** components/Hi.vue,就是第5行的代码,其他代码不变。**
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<router-view class="aaa"></router-view>
</div>
</template>
<script>
export default {
name: 'hi',
data () {
return {
msg: 'Hi, I am JSPang'
}
}
}
</script>
<style scoped>
</style>
这时候我们再访问主页的时候导航栏就发生了变化。多出了两个自导航:Hi页面1 和 Hi页面2
** 二、改写components/Hi.vue页面 **
把Hi.vue改成一个通用的模板,加入<router-view>
标签,给子模板提供插入位置。“Hi页面1” 和 “Hi页面2” 都相当于“Hi页面”的子页面,有点想继承关系。我们在“Hi页面”里加入<router-view>
标签。
** components/Hi.vue,就是第5行的代码,其他代码不变。**
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<router-view class="aaa"></router-view>
</div>
</template>
<script>
export default {
name: 'hi',
data () {
return {
msg: 'Hi, I am JSPang'
}
}
}
</script>
<style scoped>
</style>
**三、在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue **
新建的模板和Hi.vue没有太多的差别,知识改变了data中message的值,也就是输出的结果不太一样了。 Hi1.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hi',
data () {
return {
msg: 'Hi, I am Hi1!'
}
}
}
</script>
<style scoped>
</style>
Hi2.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hi',
data () {
return {
msg: 'Hi, I am Hi2'
}
}
}
</script>
<style scoped>
</style>
四、修改router/index.js
代码 我们现在导航有了,母模板和子模板也有了,只要改变我们的路由配置文件就可以了。子路由的写法是在原有的路由配置下加入children字段。
children:[
{path:'/',component:xxx},
{path:'xx',component:xxx},
]
children字段后边跟的是个数组,数组里和其他配置路由基本相同,需要配置path和component。具体看一下这个子路由的配置写法。
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
Vue.use(Router)
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},
]
}
]
})
需要注意的是,在配置路由文件前,需要先用import
引入Hi1和Hi2。
第3节:vue-router如何参数传递
开发中,参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式,这节课我们就看看vue-router
为我们提供了那些传递参数的功能。我们先想象一个基本需求,就是在我们点击导航菜单时,跳转页面上能显示出当前页面的路径,来告诉用户你想在所看的页面位置(类似于面包屑导航)。
** 一、用name
传递参数 ** 前两节课一直出现name的选项,但是我们都没有讲,这节课我们讲name的一种作用,传递参数。接着上节课的程序继续编写。
两步完成用name传值并显示在模板里:
- 在路由文件
src/router/index.js
里配置name属性。
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
模板里(src/App.vue)
用$route.name
的形势接收,比如直接在模板中显示:
<p>{{ $route.name}}</p>
二、通过<router-link>
标签中的to传参 **
也许你也会觉的上边的传参很不正规,也不方便,其实我们多数传参是不用name进行传参的,我们用<router-link>
标签中的to属性进行传参,需要您注意的是这里的to要进行一个绑定,写成:to。先来看一下这种传参方法的基本语法:
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
这里的to前边是带冒号的,然后后边跟的是一个对象形势的字符串.
name
:就是我们在路由配置文件中起的name值。params
:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。
了解基本的语法后,我们改造一下我们的src/App.vue里的<router-link>
标签,我们把hi1页面的<router-link>
进行修改。
<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>
把src/reouter/index.js
文件里给hi1配置的路由起个name,就叫hi1.
{path:'/hi1',name:'hi1',component:Hi1},
最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.
{{$route.params.username}}
第4节:单页面多路由区域操作
这节课我们讲“单页面多路由区域操作”,实际需求是这样的,在一个页面里我们有2个以上<router-view>
区域,我们通过配置路由的js文件,来操作这些区域的内容。例如我们在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%;background-color:#ccc;height:300px;"></router-view>
<router-view name="right" style="float:right;width:50%;background-color:#c0c;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
}
}
]
})
上边的代码我们编写了两个路径,一个是默认的‘/’
,另一个是’/Hi’
.在两个路径下的components
里面,我们对三个区域都定义了显示内容。 定义好后,我们需要在component文件夹下,新建Hi1.vue和Hi2.vue页面就可以了。 ** Hi1.vue **
<template>
<div>
<h2>{{ msg }}</h2>
</div>
</template>
<script>
export default {
name: 'hi1',
data () {
return {
msg: 'I am Hi1 page.'
}
}
}
</script>
Hi2.vue
<template>
<div>
<h2>{{ msg }}</h2>
</div>
</template>
<script>
export default {
name: 'hi2',
data () {
return {
msg: 'I am Hi2 page.'
}
}
}
</script>
最后在App.vue中配置我们的<router-link>
就可以了
<router-link to="/">首页</router-link> |
<router-link to="/hi">Hi页面</router-link> |