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 ...

随机推荐

脱壳_00_压缩壳_ASPACK
写在前面的话: Aspack是最常见的一种压缩壳,具有较好的兼容性.压缩率和稳定性,今天我们就来一起分析一下这个壳: 零.分析压缩壳: 0.在开始动态调试前,用PEID和LoadPE查看一些信息,做到 ...
javascript,object,IDispatchEx笔记
//js: var testObj=new Object; //com内部: testObj=Object::InvokeEx(wFlags==DISPATCH_CONSTRUCT); //注: // ...
Python datetime.md
datetime datetime模块包含了一些用于时间解析.格式化.计算的函数. Times 时间值由time类来表示, Times有小时, 分, 秒和微秒属性. 以及包含时区信息. 初始化time ...
【转】Python操作MongoDB数据库
前言 MongoDB GUI 工具 PyMongo(同步) Motor(异步) 后记前言最近这几天准备介绍一下 Python 与三大数据库的使用,这是第一篇,首先来介绍 MongoDB 吧,,走起 ...
git回答整理
1.git常用命令首先明确:git有工作区.暂存区.版本库,工作区是电脑里能看到的目录创建仓库: git init newrepo,使用我们指定目录作为Git仓库(初始化后,会在newrepo目录 ...
国家代号(CountryCode)与区号
Countries and Regions 国家或地区国际域名缩写电话代码时差 Angola 安哥拉 AO -7 Afghanistan 阿富汗 AF 93 0 Albania 阿尔巴尼亚 AL ...
JS省市区联动效果
省市区联动下拉效果在WEB中应用非常广泛,尤其在电商网站最为常见.一般使用Ajax实现无刷新下拉联动.利用jQuery,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 首先我们可以看 ...
aips初步设想
2018年5月10日星期四目标:设计一个高并发,高性能,可扩展的现代化综合大前置机. 具备以下功能: 协议支持:http.socket.mq 报文支持:xml.json.8583 Tps:500笔/ ...
Android 绘图时实现双缓冲
一.双缓冲技术原理: 在内存中创建一片内存区域,把将要绘制的图片预先绘制到内存中,在绘制显示的时候直接获取缓冲区的图片进行绘制.更具体一点来说:先通过setBitmap方法将要绘制的所有的图形绘制到一 ...