vue 路由的使用

180 阅读1分钟
步骤:
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>