步骤:
1.引入vue2.0和vue-router的js文件
vue2.0:https://unpkg.com/vue@2.2.1/dist/vue.js
vue-router:https://unpkg.com/vue-router@3.0.2/dist/vue-router.js
2.定义模板
3.定义根组件
4.定义子组件
5.定义路由并且注册路由规则
6.使用路由
7.绑定路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由的使用</title>
</head>
<body>
<!--定义模板-->
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!--占位符-->
<router-view></router-view>
</div>
</body>
</html>
<script src="vue2.js"></script>
<script src="vue-router.js"></script>
<script>
// 定义根组件
var App = Vue.extend()
//定义注册组件
var register=Vue.extend({
template:'<h1>我是注册 </h1>'
})
//定义登录组件
var login=Vue.extend({
template:'<h1>我是登陆</h1>'
})
// 定义路由并且注册路由规则
var vueRputer=new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register},
]
})
// 使用路由
new Vue({
el:'#app',
router:vueRputer
})
</script>