Code directly, the code is the best teacher to learn things. The following is a simple case using vue routing.
There are 5 steps in total:
1. Introduce Vue files.
This place requires you to download the vue js package or use npm to download the corresponding dependency package. You
do n’t know how to download the vue package installation. Refer to the official document: https: //cn.vuejs .org / v2 / guide / installation.html
2. Create component
3, set routing rules
4, map routing
5, route switching, and container rendering
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--1、引入Vue文件-->
<script src="../lib/vue-2.4.0.js"></script>
<script src="../lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<!--5、路由切换，以及容器呈现-->
<router-link to="/login" >登录</router-link>
<router-link to="/register">注册</router-link>
<!--容器 -->
<router-view></router-view>
</div>
<script>
// 2、创建组件
var login = {
template: '<h3>这是登录子组件，这个组件是 奔波霸 开发。</h3>'
}
var register = {
template: '<h3>这是登录子组件，这个组件是 霸波奔 开发。</h3>'
}
// 3、设置路由规则
var router = new VueRouter({
routes:[
// 默认路由，直接重定向到登录上
{ path: '/',redirect: '/login'},
// 路由规则数组
{ path: '/login',component:login },
{ path: '/register',component:register}
],
linkActiveClass: 'myactive' // 和激活相关的类
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// 4、映射路由
router: router // 可以简写成router
})
</script>
</body>
</html>