1. 什么是vue-router?
其实vue-router和v-if,v-show一样，是用来切换组件的显示的
v-if,v-show的标记是true/false
vue-router的标记则是哈希(也就是#/xxx),还能传递参数，这也是一种路由模式
2.vue-router使用方法步骤
2.1 导入
2.2 定义路由规则
2.3 根据路由规则创建路由对象
2.4 将路由对象挂载到vue实例
2.5 修改URL哈希值
2.6 通过<router-view/>渲染匹配到的组件
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
*{
margin:0;
padding: 0;
}
.onepage{
background-color: skyblue;
300px;
height: 500px;
}
.twopage{
background-color:deeppink;
300px;
height: 500px;
}
</style>
<script src="./js/vue.js"></script>
<!-- vue-router必须在vue之后引入 -->
<script src="./js/vue-router.js"></script>
</head>
<body>
<!--
1. 什么是vue-router?
其实vue-router和v-if,v-show一样，是用来切换组件的显示的
v-if,v-show的标记是true/false
vue-router的标记则是哈希(也就是#/xxx),还能传递参数，这也是一种路由模式
2.vue-router使用方法步骤
2.1 导入
2.2 定义路由规则
2.3 根据路由规则创建路由对象
2.4 将路由对象挂载到vue实例
2.5 修改URL哈希值
2.6 通过<router-view/>渲染匹配到的组件
-->
<template id="one">
<div class="onepage">
<p>我是页面1</p>
</div>
</template>
<template id="two">
<div class="twopage">
<p>我是页面2</p>
</div>
</template>
<div id="app1">我是app1控制的区域
<a href="#/one">切换到页面1</a>
<a href="#/two">切换到页面2</a>
<!-- 关键的一步：路由匹配到的组件将渲染在<router-view/>这里 -->
<router-view/>
</div>
<script type="text/javascript">
const one = {
template: "#one"
};
const two = {
template: "#two"
};
//2.定义切换规则 数组中一个对象对应一个规则
const routes = [
{path:'/one',component:one},
{path:'/two',component:two}
];
//3.创建路由对象
const router = new VueRouter({
routes:routes
});
//4.挂载到vue实例
//这里可以注册全局的 组件，指令，过滤器...
let vue1 = new Vue({
el:'#app1',
router:router,
data:{
//注意自定义组件时，写法不同，是以函数的方式返回
},
methods:{
},
computed:{
//计算属性的特点就是 只要返回结果没有发生变化 那么就只会被执行一次
},
components:{
//自定义局部组件
one:one,
two:two
},
filters:{
//自定义局部过滤器
},
directives:{
//自定义局部指令
}
})
</script>
</body>
</html>
<!-- 指令可看作标签属性 -->
更多代码在我的gitHub