Vue路由基本的使用

直接上代码,代码是学习东西的最好老师。下面是一个使用vue路由实现的简单小案例。
总共有5个步骤:
1、引入Vue文件
 这个地方需要自己把vue的js包下载下来或者是使用npm下载对应的依赖包
 不晓得怎么下载vue包安装的参考官方文档:https://cn.vuejs.org/v2/guide/installation.html
2、创建组件
3、设置路由规则
4、映射路由
5、路由切换,以及容器呈现

<!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>

猜你喜欢

转载自www.cnblogs.com/myfaith-feng/p/12735097.html