vue-router官网：传送门

　　vue-router起步：传送门

　　

　　vue-router路由：Vue.js官网推出的路由管理器，方便的构建单页应用

　　单页应用：Single Page Application简称SPA，只有一个web页面的应用，用户与应用交互时，动态更新该页面的内容

　　简单的来说，根据不同的url与数据，将他们都显示在同一个页面中，就可以称为是单页应用

　　而控制页面跳转需要用路由

　　vue-router下载：下载js，或使用npm install vue-router -S

　　vue-router使用：

　　　　定义组件

　　　　配置路由

　　　　创建路由对象

　　　　注入路由

　　Learn

　　　　一、-vue-router路由的基本用法

　　目录结构

　　

　　【每个demo下方都存有html源码】

一、-vue-router路由的基本用法

　　使用 router-link 组件来导航、通过传入 `to` 属性指定链接、<router-link> 默认会被渲染成一个 `<a>` 标签

    <body>

        <div id = "GaryId">

            <!--router-link默认被渲染成一个a标签-->

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

            <router-link to="/foods">美食</router-link>

            <div>

                <!-- 路由出口 -->

                  <!-- 路由匹配到的组件将渲染在这里 -->

                <router-view></router-view>

            </div>

        </div>

    </body>

　　分四步使用vue-router

    <script>

        //1 定义组件

        let Home = {

            template : "<h2>首页</h2>"

        }

        let Foods = {

            template : "<h2>美食</h2>"

        }

        //2 配置路由 路由可能有多个

        const myRoutes = [

            {

                path : "/home",

                component : Home

            },

            {

                path : "/foods",

                component : Foods

            }

        ]

        // 3 创建路由对象

        const myRouter = new VueRouter({

            //routes : routes

            routes : myRoutes

        });

        new Vue({

            //4 注入路由 简写

            router : myRouter

        }).$mount("#GaryId")

    </script>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Gary</title>

    </head>

    <body>

        <div id = "GaryId">

            <!--router-link默认被渲染成一个a标签-->

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

            <router-link to="/foods">美食</router-link>

            <div>

                <!--将数据显示在这里-->

                <router-view></router-view>

            </div>

        </div>

    </body>

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

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

    <script>

        //1 定义组件

        let Home = {

            template : "<h2>首页</h2>"

        }

        let Foods = {

            template : "<h2>美食</h2>"

        }

        //2 配置路由 路由可能有多个

        const myRoutes = [

            {

                path : "/home",

                component : Home

            },

            {

                path : "/foods",

                component : Foods

            }

        ]

        // 3 创建路由对象

        const myRouter = new VueRouter({

            //routes : routes

            routes : myRoutes

        });

        new Vue({

            //4 注入路由 简写

            router : myRouter

        }).$mount("#GaryId")

    </script>

</html>

Gary_vue-router.html

Vue_(Router路由)-vue-router路由的基本用法的更多相关文章

  1. Vue.js 2.x笔记：路由Vue Router（6）

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  2. 六、vue路由Vue Router

    一.基本概念 route, routes, router 1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮  => home内容, 这是一条route,  a ...

  3. 链接（跳转）<router-link> 和 路由实例Router

    <router-link>和<router-link>传入的对象参数中包含path路径.name命名路由.params路径参数.query ?查询,并且如果提供了 path,p ...

  4. vue（5）—— vue的路由插件—vue-router 常用属性方法

    前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...

  5. VUE：路由

    VUE:路由 一.说明 1)官方提供的用来实现SPA的vue插件 2)github:https://github.com/vuejs/vue-router 3)中文文档:http://router.v ...

  6. Vue技术点整理-Vue Router

    路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...

  7. 「进阶篇」Vue Router 核心原理解析

    前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...

  8. 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  9. Vue router 全局路由守卫

    记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...

  10. Vue router 一个路由对应多个视图

    使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...

随机推荐

  1. hdu 6082 2017百度之星资格赛

    #include<iostream> #include<cstring> #include<cstdio> #include<cmath> #inclu ...

  2. 设计模式 -- MVC

    MVC 在Web中应用是常见的了,成为基础应用模式. 不好的用法是把业务写在C 中,M只是失血模型. 应该要重M 轻C,业务写在M中,但是这样有问题了.View 会引用Model,那么View会看到M ...

  3. centos7 firewall指定IP与端口、端段访问（常用）

    https://blog.csdn.net/yipianfuyunsm/article/details/99998332 https://www.cnblogs.com/co10rway/p/8268 ...

  4. 这段时间大量网站被k的原因分析

    百度这次更新的K站幅度比较大,通过对被k网站的分析,没有发现文章类型网站有降权现象,主要集中在企业网站上.分析大约30发个网站发现共同明显的特征就是这样的网站有大量的页面只有一张或者两张图片,而这些网 ...

  5. VM安装vmtools后centos7无法上网

    先安装VmTools工具 文件 /etc/sysconfig/network-scripts/ifcfg-ens33(这里的enp0s3不是固定的,看你具体情况,但是基本是en开头的) 将 ONBOO ...

  6. 【Struts2】Ognl与ValueStack

    一.OGNL 1.1 概述 1.2 OGNL 五大类功能 1.3 演示 二.ValueStack 2.1 概述 2.2 ValueStack结构 2.3 结论 2.3 一些问题 三.OGNL表达式常见 ...

  7. 第一章 Django之MVC模式（2）

    让我们来研究一个简单的例子,通过该实例,你可以分辨出,通过 Web 框架来实现的功能与之前的方式有何不同.下面就是通过使用 Django 来完成以上功能的例子: # models.py (the da ...

  8. linux——实际工作中如何使用linux

    实际工作中,linux系统都不会在我们自己的电脑上,linux系统安装在机房的服务器上,我们操作linux不可能跑到机房去,所以我们需要有一个工具,能在公司通过网络远程连接到机房的linux服务器上 ...

  9. RNN基础

    RNN之所以称为循环神经网路,即一个序列当前的输出与前面的输出也有关.具体的表现形式为网络会对前面的信息进行记忆并应用于当前输出的计算中,即隐藏层之间的节点不再无连接而是有连接的,并且隐藏层的输入不仅 ...

  10. config.json读取和存储

    json格式的配置文件的读取和存储 public class ConfigHelper { public static T GetConfig<T>(string path) { if ( ...