vue-router 基础

一 、概要

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。

在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器

二 、基础使用

1 、创建Router

<script>   
    const home = Vue.component('home', {
        template: '<div><h1>首页</h1><p v-text="msg"></p></div>',
        data() {
            return {
                msg: '欢迎来到首页'
            }
        }
    });
    const movies = Vue.component('movie', {
        template: '<div><h1>电影</h1></div>'
    });

    const cinema = Vue.component('movie', {
        template: '<div><h1>影院</h1></div>'
    });
</script>

2、 映射路由

<script> 
    const routes = [
        {path: '/', component: home},
        {path: '/movies', component: movies},
        {path: '/cinemas', component: cinema},
    ];
</script>

3 、创建 router 实例，然后传 routes 配置

<script> 
    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    });
</script> 

4、创建Vue实例和挂载路由。

<script> 
    new Vue({
        el: "#app",
        router,
    })
</script> 

5、 使用router-link指令

<div id="app">
    <ul class="nav nav-pills">
        <li><router-link to="/">首页</router-link></li>
        <li><router-link to="/movies">电影</router-link></li>
        <li><router-link to="/cinemas">影院</router-link></li>
    </ul>
</div>

6 、使用 <router-view>

<div id="app">
    <router-view></router-view>
</div>

7、总结

JavaScript

1. 创建组件：创建单页面应用需要渲染的组件
2. 创建路由实例
3. 路由列表
4. 创建Vue实例和挂载路由

HTML

1. 使用<router-link>指令
2. 使用<router-view>标签

8、 <router-link>

跳转的方式有三种

• 方式1：直接修改地址栏
• 方式2：this.$router.push(‘路由地址’)
• 方式3：<router-link to="路由地址"></router-link>

三、流程图

image