技术博客
vue的vue-router的使用
技术概述
对于单页面应用来说，如果涉及到多个页面的话，就必须要使用到路由，一般使用官方支持的vue-router库。页面不会刷新，每个页面的数据包括组件的状态都会保留。
技术详述
一、安装和基本配置
从官网下载vue-router.js
新建一个index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>//引用vue-vouter.js文件
<script src="js/app.js"></script>
</body>
</html>
新建一个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的内容
<body>
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/app.js"></script>
</body>
结果
二、传参
在index.html中，
<div>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/user/Linzkk">Linzkk</router-link>
</div>
在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>
`,
},
另一种方法
<router-link to="more" append>显示信息</router-link>
<router-view></router-view>
结果
总结
创建路由规则，然后将路由规则传给vue-router。在html中利用router-link组件链接到首页和关于我们，用router-view将结果渲染，to后面加之前path的内容。这样便完成了router。
