Vue router
现在火热的框架中都具有路由(router)的功能,vue当然也不例外,vue路由功能的实现借助于官方提供的一个vue-router插件
所以在写路由的第一步就是去安装这个插件
顺便把vue也一起安装好
npm i -S vue vue-router
然后在页面引入vue 和 vue-router
一级路由
vue路由的实现大体需要4步
第一步就是先将每个路由要加载的组件写出来
在这里我定义三个组件
var NewsComponent = {
template: `<div>新闻</div>`
}
var ShopComponent = {
template: `<div>商城</div>`
}
var NotFoundComponent = {
template: `<div>404</div>`
}
第二步将路由地址与组件联系配置好
var routes = [{
path: '/',
redirect: '/news'
}, {
path: '/news',
component: NewsComponent
}, {
path: '/shop',
component: ShopComponent
}, {
path: '*',
component: NotFoundComponent
}]
第三部创建一个VueRouter对象
var router = new VueRouter({
routes
})
最后一步将路由实例注册到vue实例中去
var app = new Vue({
router
}).$mount("#app ")
经过完善html内容
<div id="app">
<router-link to="/news">新闻管理</router-link>
<router-link to="/shop">商城管理</router-link>
<main>
<router-view></router-view>
</main>
</div>
即可实现一个简单的一级路由
效果如下
点击可以切换路由
**路由这块内容,要注意几个route的变形写法都是固定的,不能更改。
html内容中的router-link标签经过渲染后在页面中会生成一个a标签,标签中的to属性代表着点击后的路由跳转地址,后面的router-view标签则是专门用来渲染路由内容的,vue极其适合做不刷新页面的的单页面应用**
路由实现动态渲染
先定义一个公共组件,在模板中放入一个传入的变量
const User = {
template: '<div>user</div>'
}
然后定义一个路由实例
const router = new VueRouter({
routes: [{
path: '/user/:id',
component: User
}]
})
最后还是老样子,把路由注册到vue实例中
const app = new Vue({
router
}).$mount('#app')
在body中写入
<div id="app">
<router-link to="/user/foo">/user/foo</router-link>
<router-link to="/user/bar">/user/bar</router-link>
<router-view></router-view>
</div>
打开页面并打开vue调试工具,点击两个按钮切换后在页面中并不会看到什么变化,但是我们可以在调试工具中看到
有一个$route对象其中有一个跟随路由变化的属性params,其中的id就是我们写在/user/后面的内容,那么很方便的我们就拿到路由跳转的信息,可以据此来选择加载路由上不容的数据
嵌套路由
嵌套路由父级路由与一级路由相似
不过在父级模板中要添加嵌套的路由标签
HTML body:
<div id="app">
<router-link to="/news">新闻管理</router-link>
<router-link to="/shop">商城管理</router-link>
<main>
<router-view></router-view>
</main>
</div>
父级模板:
var NewsComponent = {
template: `<div>新闻
<router-link to="/news/add">添加新闻</router-link>
<router-link to="/news/search">搜索新闻</router-link>
<router-view></router-view>
</div>`
}
var ShopComponent = {
template: `<div>商城
<router-link to="/shop/add">添加商品</router-link>
<router-link to="/shop/search">搜索商品</router-link>
<router-view></router-view>
</div>`
}
子级路由:
var NewsAddComponent = {
template: `<div>
<input type="text" placeholder="请输入新闻标题"/>
<input type="submit" value="添加新闻" />
</div>`
}
var NewsSearchComponent = {
template: `<div>
<table>
<tr>
<th>新闻ID</th>
<th>新闻标题</th>
<th>操作</th>
</tr>
<tr>
<td>001</td>
<td>ofo在山里频繁现身</td>
<td>删除</td>
</tr>
</table>
</div>`
}
、var GoodsSearchComponent = {
template: `<div>
<input type="text" placeholder="请输入商品名称"/>
<input type="submit" value="添加商品" />
</div>`
}
var GoodsAddComponent = {
template: `<div>
<table>
<tr>
<th>商品ID</th>
<th>商品名称</th>
<th>操作</th>
</tr>
<tr>
<td>001</td>
<td>ofo小黄车</td>
<td>添加</td>
</tr>
</table>
</div>`
}
实例化一个路由:
routes = [{
path: '/',
redirect: '/news'
}, {
path: '/news',
component: NewsComponent,
children: [{
path: 'add',
component: NewsAddComponent
}, {
path: 'search',
component: NewsSearchComponent
}, {
path: '*',
component: NotFoundComponent
}]
}, {
path: '/shop',
component: ShopComponent,
children: [{
path: 'add',
component: GoodsAddComponent
}, {
path: 'search',
component: GoodsSearchComponent
}, {
path: '*',
component: NotFoundComponent
}]
}
})
注册路由:
var app = new Vue({
router
}).$mount('#app')
效果如下: