vue——17-vue-router 路由的一级和二级的实例

原理

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

        {
            // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

            // 1. 定义 (路由) 组件。
            // 可以从其他文件 import 进来
            const Foo = {template: '<div>foo</div>'};
            const Bar = {template: '<div>bar</div>'};

            // 2. 定义路由
            // 每个路由应该映射一个组件。 其中"component" 可以是
            // 通过 Vue.extend() 创建的组件构造器，
            // 或者，只是一个组件配置对象。
            // 我们晚点再讨论嵌套路由。
            const routes = [
                {path: '/foo', component: Foo},
                {path: '/bar', component: Bar}
            ];

            // 3. 创建 router 实例，然后传 `routes` 配置
            // 你还可以传别的配置参数, 不过先这么简单着吧。
            const router = new VueRouter({
                routes // (缩写) 相当于 routes: routes
            });

            // 4. 创建和挂载根实例。
            // 记得要通过 router 配置参数注入路由，
            // 从而让整个应用都有路由功能
            const app = new Vue({
                router
            }).$mount('#app');

            // 现在，应用已经启动了！
        }

实例

先导入以下框架

    <link rel="stylesheet" href="frame/bootstrap.css">
    <script src="frame/vue.js"></script>
    <script src="frame/vue-router.js"></script>
    <script src="frame/jquery.min.js"></script>
    <script src="frame/bootstrap.js"></script>

1.一级路由

<div id="app">
    <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
            <div class="page-header">
                <h1>enjoy boy</h1>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-xs-2 col-xs-offset-2">
            <div class="list-group">
                <!-- 使用 router-link 组件来导航. -->
                <!-- 通过传入 `to` 属性指定链接. -->
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                <router-link class="list-group-item" to="/f1">enjoy1</router-link>
                <router-link class="list-group-item" to="/f2">enjoy2</router-link>
                <router-link class="list-group-item" to="/f3">enjoy3</router-link>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel">
                <div class="panel-body">
                    <!-- 路由出口 -->
                    <!-- 路由匹配到的组件将渲染在这里 -->
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</div>

<template id="fun1">
    <div>
        <h1>fun1 world</h1>
        <p>hello world1!</p>
        <img src="../images/fashion-001.jpg" alt="" width="250">
    </div>
</template>

<template id="fun2">
    <div>
        <h1>fun2 world</h1>
        <p>hello world2!</p>
        <img src="../images/fashion-002.jpg" alt="" width="250">
    </div>
</template>

<template id="fun3">
    <div>
        <h1>fun3 world</h1>
        <p>hello world3!</p>
        <img src="../images/fashion-003.jpg" alt="" width="250">
    </div>
</template>

        {
            //1.创建组件
            const funny1 = Vue.extend({
                template: '#fun1'
            });

            const funny2 = Vue.extend({
                template: '#fun2'
            });

            const funny3 = Vue.extend({
                template: '#fun3'
            });

            //2.定义路由
            const routes = [
                {path: '/f1', component: funny1},
                {path: '/f2', component: funny2},
                {path: '/f3', component: funny3},
                //配置根路由（一开始默认就显示f3的界面）
                {path:'/',redirect:'/f3'}
            ];

            //3.创建路由实例
            const router = new VueRouter({
                routes
            });

            //4.创建vue实例并挂载
            new Vue({
                router
            }).$mount("#app");
        }

2.多级路由

<div id="app">
    <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
            <div class="page-header">
                <h1>enjoy boy</h1>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-xs-2 col-xs-offset-2">
            <div class="list-group">
                <!-- 使用 router-link 组件来导航. -->
                <!-- 通过传入 `to` 属性指定链接. -->
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

                <!--<router-link class="list-group-item" to="/f1">enjoy1</router-link>-->
                <!--<router-link class="list-group-item" to="/f2">enjoy2</router-link>-->
                <!--<router-link class="list-group-item" to="/f3">enjoy3</router-link>-->

                <!--简化路径 在:to中还可以添加其他-->
                <router-link class="list-group-item" :to="{name:'name1'}">enjoy1</router-link>
                <router-link class="list-group-item" :to="{name:'name2'}">enjoy2</router-link>
                <router-link class="list-group-item" :to="{name:'name3'}">enjoy3</router-link>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel">
                <div class="panel-body">
                    <!-- 路由出口 -->
                    <!-- 路由匹配到的组件将渲染在这里 -->
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</div>

<template id="fun1">
    <div>
        <h1>fun1 world</h1>
        <p>hello world1!</p>
        <img src="../images/fashion-001.jpg" alt="" width="250">
        <div>
            <ul class="nav nav-tabs">
                <router-link to="/f1/onefun">one fun</router-link>
                <router-link to="/f1/twofun">two fun</router-link>
            </ul>
            <div class="tab-content">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<template id="one_fun">
    <div>
        <h3>small fun1</h3>
        <p>hello boy!</p>
        <img src="../images/fashion-001.jpg" alt="" width="150">
    </div>
</template>

<template id="two_fun">
    <div>
        <h3>small fun2</h3>
        <p>hello girl!</p>
        <img src="../images/fashion-002.jpg" alt="" width="150">
    </div>
</template>

<template id="fun2">
    <div>
        <h1>fun2 world</h1>
        <p>hello world2!</p>
        <img src="../images/fashion-002.jpg" alt="" width="250">
    </div>
</template>

<template id="fun3">
    <div>
        <h1>fun3 world</h1>
        <p>hello world3!</p>
        <img src="../images/fashion-003.jpg" alt="" width="250">
    </div>
</template>

        {
            //1.创建组件
            const funny1 = Vue.extend({
                template: '#fun1'
            });

            const oneFun = Vue.extend({
                template: '#one_fun'
            });

            const twoFun = Vue.extend({
                template: '#two_fun'
            });

            const funny2 = Vue.extend({
                template: '#fun2'
            });

            const funny3 = Vue.extend({
                template: '#fun3'
            });

            //2.定义路由
            const routes = [
                {
                    path: '/f1',
                    //设置名字 简化上面的路径
                    name: 'name1',
                    component: funny1,
                    //嵌套路由
                    children: [
                        {path: 'onefun', component: oneFun},
                        {path: 'twofun', component: twoFun},
                        //配置根路由
                        {path: '/', redirect: 'twofun'}
                    ]
                },
                {path: '/f2', name: 'name2', component: funny2},
                {path: '/f3', name: 'name3', component: funny3},
                //配置根路由（一开始默认就显示f1的界面）
                {path: '/', redirect: '/f1'}
            ];

            //3.创建路由实例
            const router = new VueRouter({
                routes
            });

            //4.创建vue实例并挂载
            new Vue({
                router
            }).$mount("#app");
        }