在说 VueRouter 之前，首先要弄明白vueRouter 是干什么的，有什么用
说出来其实很简单，就是一个模板替换的问题，当路由改变的时候，把和路由相关的模板显示出来，就是这么简单。但是，当我们不知道为什么的时候，即使瞎猫碰到死耗子做出来了，也不知道是怎么回事，下次仍然是不会，我想，我们应该要有追根究底的精神
1. 首先，写html ,因为不论是替换与否，我们都是通过html来执行的，定义要替换的
2. 写替换模板
3.注册vue对象，及替换要修改的变量即data
4.定义路由的映射关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<!-- 书写链接按钮，也就是a标签 -->
<a v-link="{path:'/home'}">Home</a>
<a v-link="{path:'/about'}">About</a>
</div>
<!-- 要使用路由替换的地方 ，先整出一个框框出来-->
<router-view></router-view>
</div>
<!-- 模板替换的内容1 -->
<template id="home">
<div>
<h3 class="a">Home page</h3>
<p>{{content}}</p>
</div>
</template>
<!-- 模板替换的内容2 -->
<template id="about">
<div>
<h3 class="a">About page</h3>
<p>{{content}}</p>
</div>
</template> <script>
var Home = Vue.extend({
template: '#home',
data: function() {
return {
content: 'this is home page!'
}
}
});
var About = Vue.extend({
template: '#about',
data: function() {
return {
content: 'this is about page!'
}
}
});
// 创建路由
var router = new VueRouter();
// 构造路由映射关系
router.map({
'/home': { // 这里和 a链接里的地址属性对应
component: Home,
},
'/about': { // 这里和 a链接的地址属性对应
component: About,
}
});
// 路由重定向，当路由为'/'时，自动映射到'/home'页面
router.redirect({
'/': '/home', // 当链接伪‘/’时，把它重定向为到 ‘/home’的链接
});
var app = Vue.extend({});
// 开启路由功能
router.start(app, "#app");
</script>
</body>
</html>
2. 在路由上加入bootstrap 排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<title>Document</title>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="well well-lg">第一个路由应用</div>
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li>
<a href="" v-link="{path:'/home'}">home</a>
</li>
<li>
<a href="" v-link="{path:'/about'}">about</a>
</li>
</ul>
</div>
<div class="col-md-9">
<router-view></router-view>
</div>
</div>
</div>
<template id="home">
<div>
<h3>homepage</h3>
<p>{{content}}</p>
</div>
</template>
<template id="about">
<div>
<h3>aboutpage</h3>
<p>{{content}}</p>
</div>
</template>
<script>
var Home = Vue.extend({
template: '#home',
data: function() {
return {
content: "huanying2015,这里是主页内容"
}
}
});
var About = Vue.extend({
template: '#about',
data: function() {
return {
content: "huanying2015,这里是相关内容，就是其他相关内容"
}
}
});
var router = new VueRouter();
router.map({
'/home': {
component: Home,
},
'/about': {
component: About,
}
});
router.redirect({
'/': '/home'
});
var App = Vue.extend({});
router.start(App, "#app");
</script>
</body>
</html>
3. 模板嵌套：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<title>Document</title>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="well well-lg">第一个路由应用</div>
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li><a href="" v-link="{path:'/home'}">首页</a></li>
<li>
<a href="" v-link="{path:'/about'}">关于我们</a>
</li>
</ul>
</div>
</div>
<div class="col-md-9">
<router-view></router-view>
</div>
</div>
<template id="home">
<div>
<h3>首页</h3>
<p>{{content}}</p>
</div>
<div>
<ul class="nav nav-tabs">
<li>
<a href="" v-link="{path:'/home/news'}">新闻</a>
</li>
<li>
<a href="" v-link="{path:'/home/video'}">视频</a>
</li>
</ul>
</div>
<router-view></router-view>
</template>
<template id="about">
<div>
<h3>关于我们</h3>
<p >{{content}}</p>
</div>
</template>
<template id="news">
<div>
<li>倒计时1天｜CCTC 2017最全参会指南</li>
<li>200分钟QA交流，14个互联网应用架构和大数据技术案例在等你</li>
<li>自己动手扩展分布式调用链</li>
<li>分布式系统下的纠删码技术之Erasure Code</li>
</div>
</template>
<template id="video">
<div>
<li>Microsoft发布.NET架构指南草案</li>
<li>详解Android中的SQLite数据库存储</li>
<li>携程实时用户行为系统实践</li>
<li>带着问题学 Machine Learning：什么是机器学</li>
</div>
</template>
<script>
var Home = Vue.extend({
template: '#home',
data: function() {
return {
content: "huanying2015,这里是首页"
}
}
});
var About = Vue.extend({
template: '#about',
data: function() {
return {
content: "huanying2015,这里是关于我们的内容"
}
}
});
var News = Vue.extend({
template: "#news",
});
var Video = Vue.extend({
template: "#video"
});
var router = new VueRouter();
router.map({
'/home': {
component: Home,
subRoutes: {
'/news': {
component: News,
},
'/video': {
component: Video
} }
},
'/about': {
component: About,
subRoutes: { }
}
});
router.redirect({
'/': '/home',
'/home': '/home/news'
});
var App = Vue.extend({});
router.start(App, "#app");
</script>
</body>
</html>
4. VueRouter 参数应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<title>Document</title>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="well well-lg">第一个路由应用</div>
<div class="col-md-3">
<ul class="nav nva-pills nav-stacked">
<li>
<a href="" v-link="{path:'/home'}">首页</a>
</li>
<li>
<a href="" v-link="{path:'/about'}">关于我们</a>
</li>
</ul>
</div>
<div class="col-md-9">
<router-view></router-view>
</div>
</div>
</div>
<template id="home">
<div>
<h3>首页</h3>
<p >{{content}}</p>
</div>
<div class="a">
<ul class="nav nav-tabs">
<li><a href="" v-link="{path:'/home/news'}">新闻</a></li>
<li><a href="" v-link="{path:'/home/video'}">视屏</a></li>
</ul>
</div>
<div>
<router-view></router-view>
</div>
</template>
<template id="about">
<div>
<h3>关于我们</h3>
<p>{{content}}</p>
</div>
</template> <template id="news">
<ul>
<li><a v-link="{path: '/home/news/detail/01'}">倒计时1天｜CCTC 2017最全参会指南</a></li>
<li><a v-link="{path: '/home/news/detail/02'}">200分钟QA交流，14个互联网应用架构和大数据技术案例在等你</a></li>
<li><a v-link="{path: '/home/news/detail/03'}">自己动手扩展分布式调用链</a></li>
<li><a v-link="{path: '/home/news/detail/04'}">分布式系统下的纠删码技术之Erasure Code</a></li>
</ul>
<router-view></router-view>
</template>
<template id="video">
<ul>
<li>Microsoft发布.NET架构指南草案</li>
<li>详解Android中的SQLite数据库存储</li>
<li>携程实时用户行为系统实践</li>
<li>带着问题学 Machine Learning：什么是机器学</li>
</ul>
</template>
<template id="detail">
<div>
<p>新闻详情: {{$route.params.id}}</p>
<p>当前路径：{{$route.path}}</p>
<p>当前参数：{{$route.params | json}}</p>
<p>路由名称：{{$route.name}}</p>
<p>路由查询参数：{{$route.query | json}}</p>
<p>路由匹配项：{{$route.matched | json}}</p>
</div>
</template>
<script>
var Home = Vue.extend({
template: '#home',
data: function() {
return {
content: 'huanying2015,这里是主页页面'
}
}
});
var About = Vue.extend({
template: '#about',
data: function() {
return {
content: 'huanying2015,这里是关于相关也的页面'
}
}
});
var News = Vue.extend({
template: "#news"
});
var Video = Vue.extend({
template: "#video"
});
var Detail = Vue.extend({
template: '#detail'
});
var router = new VueRouter();
router.map({
'/home': {
name: 'home',
component: Home,
subRoutes: {
'/news': {
name: 'news',
component: News,
subRoutes: {
'/detail/:id': {
name: 'detail',
component: Detail
}
}
},
'/video': {
component: Video
}
}
},
'/about': {
component: About
}
});
router.redirect({
'/': '/home',
'/home': '/home/news'
});
var App = Vue.extend({});
router.start(App, '#app');
</script>
</body>
</html>
5. a链接选中状态：在a链接里加入：activeClass:'active'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<title>Document</title>
</head> <body>
<div id="app" class="container">
<div class="row">
<div class="well well-lg">第一个路由应用</div>
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li><a href="#" v-link="{path : '/home', activeClass : 'active'}">首页</a></li>
<li><a href="#" v-link="{path : '/about', activeClass : 'active'}">关于我们</a></li>
</ul>
</div>
<div class="col-md-9">
<router-view></router-view>
</div>
</div>
</div>
<template id="home">
<div>
<h3>首页</h3>
<p>{{content}}</p>
</div>
<div>
<ul class="nav nav-tabs">
<li><a v-link="{path : '/home/news', activeClass : 'active'}" href="#">新闻</a></li>
<li><a v-link="{path : '/home/video', activeClass : 'active'}" href="#">视频</a></li>
</ul>
</div>
<router-view></router-view>
</template>
<template id="about">
<div>
<h3>关于我们</h3>
<p>{{content}}</p>
</div>
</template> <template id="news">
<ul class="nav nav-pills nav-stacked">
<li><a v-link="{path: '/home/news/detail/01', activeClass : 'active'}">倒计时1天｜CCTC 2017最全参会指南</a></li>
<li><a v-link="{path: '/home/news/detail/02', activeClass : 'active'}">200分钟QA交流，14个互联网应用架构和大数据技术案例在等你</a></li>
<li><a v-link="{path: '/home/news/detail/03', activeClass : 'active'}">自己动手扩展分布式调用链</a></li>
<li><a v-link="{path: '/home/news/detail/04', activeClass : 'active'}">分布式系统下的纠删码技术之Erasure Code</a></li>
</ul>
<router-view></router-view>
</template> <template id="video">
<ul>
<li>Microsoft发布.NET架构指南草案</li>
<li>详解Android中的SQLite数据库存储</li>
<li>携程实时用户行为系统实践</li>
<li>带着问题学 Machine Learning：什么是机器学</li>
</ul>
</template>
<template id="detail">
<div>
<p>新闻详情: {{$route.params.id}}</p>
<p>当前路径：{{$route.path}}</p>
<p>当前参数：{{$route.params | json}}</p>
<p>路由名称：{{$route.name}}</p>
<p>路由查询参数：{{$route.query | json}}</p>
<p>路由匹配项：{{$route.matched | json}}</p>
</div>
</template>
<script>
var Home = Vue.extend({
template: '#home',
data: function() {
return {
content: 'huanying2015,这里是主页页面'
}
}
});
var About = Vue.extend({
template: '#about',
data: function() {
return {
content: 'huanying2015,这里是关于相关也的页面'
}
}
});
var News = Vue.extend({
template: "#news"
});
var Video = Vue.extend({
template: "#video"
});
var Detail = Vue.extend({
template: '#detail'
});
var router = new VueRouter();
router.map({
'/home': {
name: 'home',
component: Home,
subRoutes: {
'/news': {
name: 'news',
component: News,
subRoutes: {
'/detail/:id': {
name: 'detail',
component: Detail
}
}
},
'/video': {
component: Video
}
}
},
'/about': {
component: About
}
});
router.redirect({
'/': '/home',
'/home': '/home/news'
});
var App = Vue.extend({});
router.start(App, '#app');
</script>
</body>
</html>