Vue路由基本的使用

作者: DarknessShadow | 来源:发表于2020-04-19 23:49 被阅读0次

VUE路由的简单使用
vue-router
五月下--vue 路由和脚手架
vue-router
Vue.js 学习笔记（三）
VUE路由（1.router与route区别 2.路由跳转传参
Day1.Vue(基本使用和define.properties)
Vue - 基本路由的使用
Vue路由基本的使用
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>