2.0新版本路由相比1.0在使用上做了一些改动,但核心思想并未改变,接下来稍作分析和对比,使用路由之前都需要引入vue-router.js文件
一、两个路由版本的初步分析
1.0
.js
/*1.创建根组件 必须得要有一个根组件*/
var app = Vue.extend();
/*2.创建路由对象*/
var router = new VueRouter();
/3.创建模板 注意通过Vue.extend创建,也可以从外部导入*/
var home = Vue.extend({
template:'<h1>首页</h1><p>aaaaa</p>'
});
var music = Vue.extend({
template:'<h1>音乐</h1>'
});
var singer = Vue.extend({
template:'<h1>歌手</h1>'
});
/*4.配置路由 每一个锚点对应哪个模板*/
router.map({
'home':{component:home}, //如果是home锚点。就会把指定的组件,放入到占位符当中
'music':{component:music},
'singer':{component:singer}
});
/*重定向设置默认跳转路由 这里默认从根路由跳转到路由home*/
router.redirect({
'/':'/home'
});
/*5.开启路由 配置完成路由之后需要手动开启路由*/
router.start(app,'#app') 注意参数:上面创建的根组件app和要挂载到的html
.html
<div id="app">
<!--1.设置跳转路由-->
<li><a v-link="{path:'/home'}">首页</a>