Vue.js 相关知识（路由）

1. 简介

路由，工作原理与路由器相似（路由器将网线总线的IP分发到每一台设备上），Vue中的路由根据用户在网页中的点击，将其引导到对应的页面。

2. 使用步骤

安装vue-router或者直接引入vue-router.js（下载地址：https://router.vuejs.org/）

例：SPA页面（Single Page Application，将一个网站的所有页面写在一个文件，通过不同的div进行区分，再通过div的显示、隐藏实现跳转效果）

定义组件对象（页面）、组件模板、注册组件
定义router-link、router-view
- router-link：组件会被解析为a标签
- router-view：路由显示的内容会在 router-view 中显示
定义路由规则
注册到根组件中

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript" src="vue-router.js"></script>

</head>

<body>

    <div id="app">

        <!-- 4. 定义router-link、router-view -->

        <div>

            <router-link to='/home'>首页</router-link>

            <router-link to='/setting'>设置</router-link>

            <router-view></router-view>

        </div>

    </div>

    <!-- 2. 定义组件模板 -->

    <template id="home">

        <div>

            <h3>首页页面</h3>

        </div>

    </template>

    <template id="setting">

        <div>

            <h3>设置页面</h3>

        </div>

    </template>

    <script type="text/javascript">

        //1. 定义组件对象

        let Home = {template:'#home'}

        let Setting = {template:'#setting'}

        //5. 定义路由规则

        let route = new VueRouter({

            routes:[

                {

                    path:'/home',

                    component:Home

                },

                {

                    path:'/setting',

                    component:Setting

                }

            ]

        })

        let app = new Vue({

            el:"#app",

            //3. 注册到根组件中

            components:{

                Home,

                Setting

            },

            //6. 注册到根组件中

            router:route

        })

    </script>

</body>

</html>

3. 嵌套路由

实际开发时，一个页面常会嵌套多个组件（页面），如：设置页面中包括个人设置、系统设置等

定义组件对象、组件模板、注册组件
定义router-link、router-view
- 嵌套的路由，router-link、router-view 定义在嵌套的地方
定义路由规则
- 嵌套的路由，通过 children 属性定义

  <div id="app">

        <!-- 4. 定义router-link、router-view -->

        <div>

            <router-link to='/home'>首页</router-link>

            <router-link to='/setting'>设置</router-link>

            <router-view></router-view>

        </div>

    </div>

    <!-- 2. 定义组件模板 -->

    <template id="home">

        <div>

            <h3>首页页面</h3>

        </div>

    </template>

    <template id="setting">

        <div>

            <h3>设置页面</h3>

            <router-link to="/setting/user">个人设置</router-link>

            <router-link to="/setting/system">系统设置</router-link>

            <router-view></router-view>

        </div>

    </template>

    <template id="user">

        <div>

            <h3>个人设置页面</h3>

        </div>

    </template>

    <template id="system">

        <div>

            <h3>系统设置页面</h3>

        </div>

    </template>

    <script type="text/javascript">

        //1. 定义组件对象

        let Home = {template:'#home'}

        let Setting = {template:'#setting'}

        let User = {template:'#user'}

        let System = {template:'#system'}

        //5. 定义路由规则

        let route = new VueRouter({

            routes:[

                {

                    path:'/home',

                    component:Home

                },

                {

                    path:'/setting',

                    component:Setting,

                    children:[

                        {

                            path:'/setting/user',

                            component:User

                        },

                        {

                            path:'/setting/system',

                            component:System

                        }

                    ]

                }

            ]

        })

        let app = new Vue({

            el:"#app",

            //3. 注册到根组件中

            components:{

                Home,

                Setting,

                User,

                System

            },

            //6. 注册到根组件中

            router:route

        })

    </script>

4. 动态路由

同一个路由地址，根据传递的不同参数，显示不同的内容，如：商品详情页，多个商品共用一个页面（带有动态参数）

定义路由规则时，将动态参数使用 :变量进行参数绑定

<div id="app">

        <!-- 4. 定义router-link、router-view -->

        <div>

            <router-link to='/detail/1'>手机1</router-link>

            <router-link to='/detail/2'>手机2</router-link>

            <router-view></router-view>

        </div>

    </div>

    <!-- 2. 定义组件模板 -->

    <template id="detail">

        <div>

            <h3>商品详情页</h3>

            <p>商品id是：{{this.$route.params.id}}</p>

        </div>

    </template>

    <script type="text/javascript">

        //1. 定义组件对象

        let Detail = {template:'#detail'}

        //5. 定义路由规则

        let route = new VueRouter({

            routes:[

                {

                    //说明：该处为动态参数，通过this.$route.params.id获取

                    path:'/detail/:id',

                    component:Detail

                }

            ]

        })

        let app = new Vue({

            el:"#app",

            //3. 注册到根组件中

            components:{

                Detail

            },

            //6. 注册到根组件中

            router:route

        })

    </script>

5. 编程式路由

编程式路由，通过js代码实现页面跳转，类似 js 代码 window.location 实现页面跳转

<div id="app">

        <div>

            <button @click="show">查看手机2商品详情</button><br>

            <router-link to='/detail/1'>手机1</router-link>

            <router-link to='/detail/2'>手机2</router-link>

            <router-view></router-view>

        </div>

    </div>

    <template id="detail">

        <div>

            <h3>商品详情页</h3>

            <p>商品id是：{{this.$route.params.id}}</p>

        </div>

    </template>

    <script type="text/javascript">

        let Detail = {template:'#detail'}

        let route = new VueRouter({

            routes:[

                {

                    path:'/detail/:id',

                    component:Detail

                }

            ]

        })

        let app = new Vue({

            el:"#app",

            components:{

                Detail

            },

            router:route,

            methods:{

                show(){

                    this.$router.push({path:'/detail/2'})

                }

            }

        })

    </script>

6. 路由重定向

重定向，当访问一个路由地址时，自动跳转至其他的路由地址

例：当打开路由页面时，不显示任何内容（默认无匹配的路由规则）

例子代码

修改代码（在routes中添加红色部分的内容）

　　　　　　routes:[

                {

                    path:'/home',

                    component:Home

                },

                {

                    path:'/',

                    redirect:'/home',

                    component:Home

                },

                {……}

            ]

直接打开当前页面时，自动跳转到/home页面（重定向）

Vue.js 相关知识（路由）的更多相关文章

Vue.js相关知识3-路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
Vue.js相关知识4-路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
Vue.js相关知识2-组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
Vue.js相关知识1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
Vue.js 相关知识（动画）
1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...
Vue.js 相关知识（组件）
1. 组件介绍组件(component),vue.js最强大的功能之一作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体根组件:我们实例化的Vue对象就是一个组件 ...
Vue.js 相关知识（基础）
1. Vue.js 介绍 Vue,读音 /vjuː/,类似于 view),是一套用于构建用户界面的渐进式框架(重点在于视图层). 作者:尤雨溪注:学习 vue.js 时,一定要抛弃 jQuery 的 ...
Vue.js 相关知识（脚手架）
1. vue-cli 简介 Vue-cli 是 vue的设计者,为提升开发效率而提供的一个脚手架工具,可通过vue-cli快速构造项目结构 2. vue-cli 安装步骤安装npm 或 cnpm n ...
vue.js基础知识篇(2):指令详解
第三章:指令 1.语法指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...

随机推荐

题解 P1550 【[USACO08OCT]打井Watering Hole】
题面(翻译有点问题,最后一句话) 农民John 决定将水引入到他的n(1<=n<=300)个牧场.他准备通过挖若干井,并在各块田中修筑水道来连通各块田地以供水.在第i 号田中挖一口井需要 ...
Alpha事后诸葛亮(阳光普照队)
Alpha事后诸葛亮设想和目标 1.实现文字识别,以用户喜欢的图片做背景将其保存,生成新的图片. 2.时间比较赶,主要是因为队员对于Android开发方面的了解不多,可以说是几乎没有,需要一步一步的 ...
python闭包，看不懂请揍我
什么是闭包? 闭包就是一个个内嵌函数+内嵌函数里面引用了外部变量+返回这个内嵌函数(一般是这样) 为什么使用闭包? 有点类似与函数模板?.. 举一个实际的例子: class people: name ...
PyQt5--Position
# -*- coding:utf-8 -*- ''' Created on Sep 13, 2018 @author: SaShuangYiBing ''' import sys from PyQt5 ...
Python各类并发模版
以后在写一些Python并发的时候参考下面这个模块,小西总结的挺全的,直接搬砖了. 进程并发 from multiprocessing import Pool, Manager def func(d, ...
std::lexicographical_compare函数的使用
按照词典序比较前者是否小于后者. 当序列<first1, last1>按照字典序比较小于后者序列<first2, last2>,则返回true.否则,返回false. 所谓字典 ...
mysql row日志格式下查看binlog sql语句
有时候我们需要使用row作为binlog的日志格式,即配置文件使用了binlog_format= row 参数这样以来,我们在查看数据库binlog内容时候,就看不到增删改查的具体语句了,在数据库恢 ...
OpenCV——输入输出XML和YAML文件
ocv & derate & crpr
OCV: on-chip-variation 是指芯片在制造工艺P.工作电压V.环境温度T 等参数的局部变化情况下导致的 cell &net delay 变化,比如假设从clk 到两个reg ...
HDU1863（Kruskal+并查集水题）
https://cn.vjudge.net/problem/HDU-1863 省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能间接通过公路可达即可). ...