技术博客

vue的vue-router的使用

技术概述

对于单页面应用来说，如果涉及到多个页面的话，就必须要使用到路由，一般使用官方支持的vue-router库。页面不会刷新，每个页面的数据包括组件的状态都会保留。

技术详述

一、安装和基本配置

从官网下载vue-router.js
新建一个index.html

//引用vue-vouter.js文件



新建一个app.js文件

//路由规则数组
var routes = [
{
path: '/',
component: {
template: <div> <h1>首页</h1> </div> ,
},
},
{
path: '/about',
component: {
template: <div> <h1>关于我们</h1> </div> ,
},
},
];
//将路由规则传给vue-router
var router = new VueRouter({
routes: routes,
});

new Vue({
el: '#app',
router: router,
});
index.html
利用router-link组件链接到首页和关于我们，用router-view将结果渲染，to后面加之前path的内容

首页
关于我们

结果

二、传参

在index.html中，

首页
关于我们
Linzkk

在app.js中定义user

{
path: '/user/:name',
component: {
template: <div> <div>我的名字是:{{$route.params.name}}</div> </div> ,
},
},
结果

三、子路由

在uesr的路由规则中加入子路由“more”的规则

children: [
{
path: 'more',
component: {
template: <div> 用户：{{$route.params.name}}的详细信息 住址：啊撒我打打哇 </div>
}
}
]
修改user路由规则

{
path: '/user/:name',
component: {
template: <div> <div>我的名字是:{{$route.params.name}}</div> <router-link :to="'/user/' + $route.params.name + '/more'">显示信息</router-link> <router-view></router-view> </div> ,
},
另一种方法

显示信息

结果

总结

创建路由规则，然后将路由规则传给vue-router。在html中利用router-link组件链接到首页和关于我们，用router-view将结果渲染，to后面加之前path的内容。这样便完成了router。

参考加文献

https://router.vuejs.org/zh/installation.html