html页面
<div id="app">
<div class="nav">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<ul>
<li>
<router-link to="/" exact>首页</router-link>
</li>
<li>
<router-link to="/news">新闻动态</router-link>
</li>
<li>
<router-link to="/user">用户</router-link>
<ul>
<li v-for="(item,index) in list">
<router-link :to="{path:'/user/'+item.name+'/base?',query:{age:item.age,gender:item.gender}}">
{{item.name}}
</router-link>
</li>
<ul>
</li>
</ul>
</div>
<div class="rightmin">
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</div>
模板定义
<!--定义首页模板,方式一-->
<script type="text/x-template" id="hometpl">
<div>这是首页</div>
</script>
<!--用户信息模板,方式为二-->
<template id="usertpl">
<div>
<h1>用户信息</h1>
<h3>{{$route.params.name ==null ? "姓名":$route.params.name}}</h3>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<!--用户详情模板-->
<template id="basetpl">
<div>
<table style="background:#eee;width:100%;" border="1">
<tr>
<td>姓名:</td>
<td>{{$route.params.name}}</td>
</tr>
<tr>
<td>年龄:</td>
<td> {{$route.query.age}}</td>
</tr>
<tr>
<td>性别</td>
<td>{{$route.query.gender ==0 ? "男":"女"}}</td>
</tr>
</table>
</div>
</template>
路由配置
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//定义数组对象数据
var listdata = [{ name: '李特成',age: 20,gender: 0},{name: '章帅', age: 10,
gender: 1},{name: '刘能',age: 30,gender: 0}];
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Home = {
template: '#hometpl'
}
const news = {
template: '<div>新闻</div>'
}
const user = {
template: '<div>用户</div>'
}
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{
path: '/',
component: Home
},
{
path: '/news',
component: news
},
{
path: '/user',
component: {
template: '#usertpl',
},
children: [{
path: ':name',
component: {
template: '<div><router-view></router-view></div>'
},
children: [{
path: 'base',
component: {
template: '#basetpl'
}
}]
}]
}
]
//创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes
});
//创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const vm = new Vue({
el: '#app',
data: {
list: listdata
},
router,
})
</script>
样式表
<style>
*,html,body {padding: 0px;margin: 0px;}
.nav {text-align: center;}
.nav a {margin: 0px 10px;color: #000;line-height: 25px;}
.nav {width: 20%;float: left;height: 500px;text-align: left;padding: 0px;margin: 0px;background: #eee;}
.rightmin {padding: 10px; float: right;width: 70%}
.rightmin h1 {font-size: 16px;}
.rightmin h3 {font-size: 15px;padding: 5px 0px;}
.nav a.router-link-active {color: green;text-decoration: underline;}
</style>
效果图