在前端开发的生涯中,很有可能会开发SPA(single page appaication)单页面应用,单页面应用少不了用到路由,那么Vue中的路由是怎么用的呢,下面我们就来探讨一下:
一、Vue路由简介:
用来开发SPA(单页面应用),根据不同的url地址显示不同的内容,但显示在同一个页面中。
二、基本用法
引用:需要额外的引用vue-router.js插件
HTML部分
a).使用内置组件`router-link`组件来定义导航,组件的属性`to`指定连接到的url;
b).使用内置组件`router-view`组件来显示路由内容;例如:
<div class="nav">
<!-- 使用router-link组件来定义导航,to属性指定连接到的url -->
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
<!-- 最后被渲染成a标签 -->
</div>
<div class="content">
<!-- 使用router-view来显示路由内容 -->
<router-view></router-view>
</div>
JS部分
a).定义路由对应的内容组件
b).配置路由
c).创建路由的实例
d).创建Vue实例,并将创建的路由实例挂载到Vue实例上(注入路由),例如:
第一步:定义路由对应的内容组件
var home = {//路由组件
template:"<h3>我是主页内容</h3>"
}
var news = {//同上
template: "<h3>我是新闻内容</h3>"
}
第二步:配置路由
var routes = [//是数组,其中的每一项都代表一个路由
{path:"/home",component:home},//component表示对应的内容组件指向哪个组件
{path: "/news", component: news },
{path: "*", redirect:"/home"},//路由的重定向,当找不到匹配的路由时默认定向到home组件
]
第三步:创建路由的实例
var router = new VueRouter({
routes:routes,//必须
mode:"history",//修改路由的模式,默认是hash,可以是history,abstract
linkActiveClass:"active",//修改活动链接的class类名
// 还有其他的配置项...
})
第四步:创建Vue实例,并将创建的路由实例挂载到Vue实例上(注入路由)var app = new Vue({
el:"#container",
router:router,//注入路由
data:{
greeting:"hello,world!",
task:{
content:"完成数据分发工作",
timeLine:"2018-3-20",
joiner:"张三"
}
}
})