第9章-路由配置

于 2018-09-07 13:46:00 发布
阅读量89 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zhangqigao/p/9604104.html
版权

一、学习目标

  1. 理解路由的作用
  2. 掌握一级路由的配置方法(重点)
  3. 掌握二级路由的配置方法(重点)
  4. 掌握路由传参的使用方法(重点+难点)

二、路由的概述

2.1、路由的作用

  • 根据url锚点路径，在容器中加载不同的模块
  • 完成SPA(Single Page Application) 的开发

2.2、路由原理

  • 利用锚点完成切换
  • 页面不会刷新，只有局部刷新

2.3、路由功能引入

  • 官方推荐使用  vue-router.js 库来引入路由功能模块
  • vue-router.js下载地址：https://unpkg.com/vue-router/dist/vue-router.js
  • 具体安装和使用：https://router.vuejs.org/zh/installation.html

2.4、小结

  • 作用：根据URL 锚点路径，在容器中加载不同的模块
  • 原理： 利用锚点完成切换

三、一级路由配置

3.1、一级路由配置方法

  • 引入vue-router.js库
  • 创建路由所需模块
    • 使用vue.extend()方法创建模块
var Home = Vue.extend({
           template: "#home"
});

3.2、分配路由路径

routes:[
      {path:"/index",component:{}},
      {path:"/m1", component:{}}
]

3.3、创建路由对象

var router = new VueRouter({
     // 路径信息(routes)
     routes: [
          // {path:'自己分配的路径', component: 组件名字/组件}
          {path: '/home', component: Home},

          {path: '/Mine', component: Mine},
     ]
}),

3.4、添加路由配置项

var vm = new Vue({
      el: "#app",
      router: new VueRouter({
           routes:[
                 {path:"/index", component:{}},
                 {path:"/m1", component:{}}
           ]
      })
})

3.5、router-link和router-view

1.router-link

作用：使用路由去完成跳转，不需要再使用 a 标签，使用<router-link></router-link> 代替a 标签。

使用router-link:
    在两对尖括号中添加文本；
    to属性用来设置跳转url地址;
    to = 路由配置时，routes数据中的path信息，需要填写此处

2、router-view
作用：用来占位，就是内容占位的内容不是固定的，根据你组件中模板的内容不同来切换的
使用：<router-view></router-view>

3、router-link和router-view具体使用： 

<!--显示链接-->
<ul>
    <li>
        <!--to的值，是一级路由url-->
        <router-link to="/home">home</router-link>
    </li>
</ul>

<!--显示内容-->
<div class="show">
      <!--占位，即显示路由模板中的内容，如果是/home就显示home下的模板内容-->
      <router-view></router-view>
</div>

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
    var vm = new Vue({
        el: "#box",
        data: {},
        router: new VueRouter({
            routes: [
                // '/home'是一级路由的url
                {path: "/home",component:{template:'<h2>首页</h2>'}
                },
        }),
    });
</script>

3.6、实现路由切换实例

1、实现的效果图

2、不剥离路由实例的写法

说明：就是路由实例和路由路径都是些在 vue实例中，一般情况下不会用这种方式，代码如下：

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {list-style: none;display: inline-block;margin: 20px 10px;}
        a {text-decoration: none;}
        .show {width: 300px;height: 200px;background: #ccc}
    </style>
</head>
<body>
    <div id="box">
            <ul>
                <li>
                    <router-link to="/home">home</router-link>
                </li>
                <li>
                    <router-link to="/news">news</router-link>
                </li>
                <li>
                    <router-link to="/hot">hot</router-link>
                </li>
            </ul>
        <div class="show">
            <router-view></router-view>
        </div>
    </div>
    <!--
        使用路由去完成跳转，就不再使用 a 标签了;
        使用<router-link></router-link> 代替a 标签
        router-link:
            在两对尖括号中添加文本；
            to属性用来设置跳转url地址;
            to = 路由配置时，routes数据中的path信息，需要填写此处
        router-view:
            作用：用来占位，就是内容占位的内容不是固定的，根据你组件
            中模板的内容不同来切换的
            使用：<router-view></router-view>
    -->
    <script src="js/vue.js"></script>
    <!--
        一级路由的配置：
        1、引入 vue-router.js 库
    -->
    <script src="js/vue-router.js"></script>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {},
            //添加路由配置项
            // router: 路由实例(对象)
            // router：new VueRouter()

            //设置路由对象的配置项
            /* new VueRouter({
                路径信息: 路径信息放在数组中
                routes: [
                    {path:'url',component:'组件'}
                ]
            })
            */
            router: new VueRouter({
                routes: [
                    // 路径命名: '/+小写单词'
                    {path: "/home",component:{template:'<h2>首页</h2>'}
                    },
                    {path: "/news",component:{template:'<h2>新闻</h2>'}
                    },
                    {path: "/hot",component:{template:'<h2>热点</h2>'}
                    },
                ]
            }),
        });
    </script>
</body>
</html>
不剥离路由实例

3、剥离路由实例的写法

说明：就是路由实例和路由路径独立出来，推荐用这种方式，代码如下：

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {list-style: none;display: inline-block;margin: 20px 10px;}
        a {text-decoration: none;}
        .show {width: 300px;height: 200px;background: #ccc}
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li>
                <!-- 相当于a链接; to用来设置路径信息，相当于href -->
                <router-link to="/home">home</router-link>
            </li>
            <li>
                <router-link to="/news">news</router-link>
            </li>
            <li>
                <router-link to="/hot">hot</router-link>
            </li>
        </ul>
        <!--显示的内容一定要在实例的容器中，不然不显示-->
        <div class="show">
            <!-- 用来进行占位 -->
            <router-view></router-view>
        </div>
    </div>

    <template id="home">
        <div>
            <h2>首页</h2>
            <ul>
                <li>今日热点</li>
                <li>体育新闻</li>
                <li>关爱八卦成长协会</li>
            </ul>
        </div>
    </template>
    <script src="js/vue.js"></script>
    <!--使用路由功能，引入 vue-router.js 库-->
    <script src="js/vue-router.js"></script>
    <script type="text/javascript">
        //1.准备路由所需模块(组件)
        //全局vue下，有extend(),用来注册路由所需的模块(组件)
        //模块名称，首字母大写
        var Home = Vue.extend({
           template: "#home"
        });
        var News = Vue.extend({
            template: "<h1>news</h1>"
        });
        var Hot = Vue.extend({
            template: "<h1>hot</h1>"
        });
        //2、配置路径信息
        var routes = [ //路径变量可以写任何，但是一般情况下都写成routes
            //{path:'url',component: 组件名称}
            {path: '/home',component: Home},
            {path: '/news',component: News},
            {path: '/hot',component: Hot},
        ];
        //3、创建路由对象
        var router = new VueRouter({
             //配置项
            //routes: 存储路径信息的数据
            //routes：arr
            //es6新语法：如果配置项名称与后方配置项名称相同可以简写
            routes // （缩写）相当于 routes: routes
        });
        var vm = new Vue({
            el: "#box",
            data: {
            },
            //添加路由配置项
            //router: 路由对象
            router  //名称和配置相同,相当于,router: router
        });
        //路由重定向
        //push(): 路由对象自带方法，进行路径跳转 push('url')
        router.push('/home');
    </script>
</body>
</html>
剥离路由实例

注意：占位符的div一定要在实例的容器(id=box)中，这个问题排查好长时间。

四、路由重定向

4.1、路由重定向

  • 路由对象：$router
  • 路由跳转方法： push()
  • 语法：$router.push(‘url地址’)

4.2、重定向两种方式

接下来练习：就是点击刷新，就直接跳转到home页面。

①在页面创建之前，进行重定向，注意，这种方式，不管剥离还是不剥离都是可以这么写的。

beforeCreate: function(){
                //合起来的话，就是重新生成页面的时候，重定向到首页
                this.$router.push('/home');
},

如图：

②在vue的实例之前重定向，这种方式只能是剥离路由实例情况下这么写：

//路由重定向
//push(): 路由对象自带方法，进行路径跳转 push('url')
router.push('/home');

如图：

五、二级路由配置

5.1、配置二级路由路径信息

说明：在一级路由的配置项中，用children配置项，来配置二级路由的信息。

routes: [
      {path: '/hot', component: Hot,children: [
            // 二级路由中，路径不要加 /
           {path:'01',component:{template: '<p>010101010</p>'}},
           {path:'03',component:{template: '<p>333333333</p>'}},
       ]},
      {path: '/mine', component: Mine},
]

5.2、配置模板

<template id="hot">
    <div>
        <h1>hothot</h1>
        <router-link to="/hot/01">新闻001</router-link>
        <router-link to="/hot/02">新闻002</router-link>
        <router-link to="/hot/03">新闻003</router-link>
        <router-view></router-view>
    </div>
</template>

5.3、二级路由实例

1、效果图：

2、代码如下：

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {list-style: none;display: inline-block;margin: 20px 10px;}
        a {text-decoration: none;}
        .show {width: 300px;height: 200px;background: #ccc}
    </style>
</head>
<body>
    <div id="box">
        <!--显示的内容一定要在实例的容器中，不然不显示-->
        <div class="show">
            <!-- 用来进行占位 -->
            <router-view></router-view>
        </div>
        <ul>
            <li>
                <!-- 相当于a链接; to用来设置路径信息，相当于href -->
                <router-link to="/home">home</router-link>
            </li>
            <li>
                <router-link to="/news">news</router-link>
            </li>
            <li>
                <router-link to="/hot">hot</router-link>
            </li>
        </ul>
    </div>

    <template id="home">
        <div>
            <h2>首页</h2>
        </div>
    </template>
    <template id="news">
        <div>
            <h1>news</h1>
            <!--配置模板-->
            <router-link to="/news/film">films</router-link>
            <router-link to="/news/tv">tv</router-link>
            <router-view></router-view>
        </div>
    </template>
    <script src="js/vue.js"></script>
    <!--使用路由功能，引入 vue-router.js 库-->
    <script src="js/vue-router.js"></script>
    <script type="text/javascript">
        //1.准备路由所需模块(组件)
        //全局vue下，有extend(),用来注册路由所需的模块(组件)
        //模块名称，首字母大写
        var Home = Vue.extend({
           template: "#home"
        });
        var News = Vue.extend({
            template: "#news"
        });
        var Hot = Vue.extend({
            template: "<h1>hot</h1>"
        });
        //2、配置路径信息
        var routes = [ //路径变量可以写任何，但是一般情况下都写成routes
            //{path:'url',component: 组件名称}
            {path: '/home',component: Home},
            {path: '/news',component: News,children:[
                    //配置二级路由信息
                    {path:'film',component:{
                        template: "<p>电影: 无双、影</p>"
                        }
                    },
                    {path: 'tv',component:{
                        template:'<p>屌丝男士</p>'
                        }
                    },
                ]},
            {path: '/hot',component: Hot},
        ];
        //3、创建路由对象
        var router = new VueRouter({
             //配置项
            //routes: 存储路径信息的数据
            //routes：arr
            //es6新语法：如果配置项名称与后方配置项名称相同可以简写
            routes // （缩写）相当于 routes: routes
        });
        var vm = new Vue({
            el: "#box",
            data: {
            },
            //添加路由配置项
            //router: 路由对象
            router  //名称和配置相同,相当于,router: router
        });
        //路由重定向
        //push(): 路由对象自带方法，进行路径跳转 push('url')
        router.push('/home');
    </script>
</body>
</html>
二级路由配置实例

说明：router-view：路由匹配到的组件将渲染在这里。分配二级路由路径时，路径前不加 ‘/’，这边要注意的时候，我们一般进入一个页面要有默认页面，所以二级理由是这样是这样设置，默认二级路由path为空，就会跳转首页：

六、路由传参

6.1、参数接收和传递

1、传递参数

<router-link to='/news/001'></router-link>

2、接收参数

$router.params:id

6.2、路由传参实例

显示页面如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {text-decoration: none;}
        .show {width: 300px;height: 200px;background: #eee}
    </style>
</head>
<body>
    <div id="box">
        <p>
            <router-link to="/home">home</router-link>
            <router-link to="/news">news</router-link>
        </p>
        <div class="show">
            <router-view></router-view>
        </div>
    </div>
    <template id="home">
        <div>
            <h2>首页</h2>
        </div>
    </template>
    <template id="news">
        <div>
            <h2>新闻</h2>
            <li>
                <router-link to="/news/0">新闻000</router-link>
                <router-link to="/news/1">新闻001</router-link>
                <!-- 传递参数: 通过点击不同的router-link进行传递,将二级的路劲信息进行转换 -->
            </li>
        </div>
    </template>
    <template id="nd">
        <div>
            <p>新闻详情页</p>
            <!-- 接收参数: $route.params.id 进行接收 -->
            <span>这是传过来的参数:{{ arr[$route.params.id] }}</span>
        </div>
    </template>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script type="text/javascript">
        var Home = Vue.extend({
            template: "#home"
        });
        var News = Vue.extend({
            template: "#news"
        });
        // 显示新闻详情页，需要为新闻详情页配置路劲信息
        // 二级路径 /:id
        var NewsDetail = Vue.extend({
            template: '#nd',
            data: function () {
                return{
                    arr: ['秀春刀','战狼二']
                };
            }
        });
        var routes = [
            {path:'/home',component: Home},
            {path:'/news',component: News},
            // /:id方式传参
            {path:'/news/:id',component: NewsDetail},
        ];
        var router = new VueRouter({
            routes
        });
        var vm = new Vue({
            el: "#box",
            data: {},
            router
        });
        router.push('/home');
    </script>
</body>
</html>
路由传参

总结：

  • 传参原理： 通过 $router 对象上的params参数获取传递过来的id

转载于:https://www.cnblogs.com/zhangqigao/p/9604104.html

weixin_34343308
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值