-
首先，需要下载去Vue.js官网或者Vue.js菜鸟教程下载vue-router.js插件。
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
-
学习路由有固定的步骤：
- 创建组件
- 配置路由（组件映射路径）
- 创建路由实例对象router
- 创建和挂载vue实例，同时使用router配置参数注入路径信息。
- 路由跳转部分：router-link 是一个组件，该组件用于设置一个导航链接，切换不同的HTML内容（组件），to属性是目标地址，既要显示的内容部分，router-link默认会被渲染成a标签。
- 路由出口：路由跳转时匹配的路径对应的组件将渲染到这里。
-
下面以单页面组件切换为例：
-
其中代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.first{
width: 300px;
border: 3px solid red;
}
.second{
width: 300px;
border: 3px solid blue;
}
</style>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!--路由跳转部分-->
<!--router-link 是一个组件，该组件用于设置一个导航链接，切换不同的HTML内容（组件），to属性是目标地址，既要显示的内容部分，router-link默认会被渲染成a标签
-->
<div>
<router-link to="/first">first页面</router-link>
-------
<router-link to="/second">second页面</router-link>
</div>
<!--路由出口，路由跳转时匹配的路径对应的组件将渲染到这里-->
<transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut" mode="out-in">
<router-view></router-view>
</transition>
<!--<router-view></router-view>-->
</div>
</body>
<script id="first" type="text/x-template">
<div class="first">
<p>{{name}}</p>
<ul>
<li>first内容1</li>
<li>first内容2</li>
<li>first内容3</li>
<li>first内容4</li>
<li>first内容5</li>
</ul>
</div>
</script>
<script id="second" type="text/x-template">
<div class="second">
<p>{{name}}</p>
<ul>
<li>second内容1</li>
<li>second内容2</li>
<li>second内容3</li>
<li>second内容4</li>
<li>second内容5</li>
</ul>
</div>
</script>
<script type="text/javascript">
// 注册局部组件 const修饰的变量不能被修改
const First = {
template:`#first`,
data(){
return {
name:"first页面内容部分"
}
}
}
//局部组件
const Second = {
template:`#second`,
data(){
return {
name:"second页面内容部分"
}
}
}
// 配置路由 定义路由对象，每个路由可以映射一个路径 -- 组件
const rs = [
{
path:"/",//默认路由的径路
component:First
},
{
path:"/first",
component:First
},
{
path:"/second",
component:Second
}
];
//创建路由实例对象 router，然后配置路由信息
const router = new VueRouter({
routes:rs
})
//创建和挂载vue实例，同时使用router配置参数注入路径信息
const ve = new Vue({
// router:router,
router,//简写
el:"#app",
data:{
msg:"路由跳转讲解"
},
components:{
First,
Second
}
})
</script>
</html>
其实学习路由这些是远远不够的，还有包括子路由，路由出口怎么找！！