什么是路由

　　后端路由：**对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

　　前端路由：**对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

　　在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <!-- 必须先导入Vue -->

    <script src="./lib/vue-2.4.0.js"></script>

    <!-- 在导入router包 -->

    <script src="./lib/vue-router-3.0.1.js"></script>

</head>

<body>

    <div id="app">

        <!-- <a href="#/log">登录</a>

        <a href="#/zhuce">注册</a> -->

        <!-- router-link 也是router提供的标签，用来监听URL  不用写#号，默认渲染为一个a 标签 -->

        <router-link to="/log" tag="span">登录</router-link>

        <router-link to="/zhuce">注册</router-link>

        <!-- VueRouter提供的元素标签，用来切换路由组件的显示的 -->

        <!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去 -->

        <!-- 所以： 我们可以把 router-view 认为是一个占位符 -->

        <router-view></router-view>

    </div>

    <script>

        // 组件模板对象，以后定义组件都这么用  别使用template  那个不是组件模板对象

        var log={

            template:"<h1>登录界面</h1>"

        }

        var zhuce={

            template:"<h1>注册界面</h1>"

        }

        // 路由实例

        var vuerouterobj=new VueRouter({

            // route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思

            routes: [// 路由匹配规则

             // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：

            //  属性1 是 path， 表示监听 哪个路由链接地址；

            //  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件

            // 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；

            // { path: '/', component: login },

                {path:'/',redirect:'/log'},// 这里的 redirect path是根路径的时候，页面重定向到登录界面

                {path:'/log',component:log},

                {path:'/zhuce',component:zhuce},

            ]

        })

        // Vue实例

        var vm=new Vue({

            el:'#app',

            data:{},

            methods: {

            },

            // 引用路由实例

            router:vuerouterobj   // 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件

        })

    </script>

</body>

</html>

Vue-link 和vue-view 添加样式和动画

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <!-- 必须先导入Vue -->

    <script src="./lib/vue-2.4.0.js"></script>

    <!-- 在导入router包 -->

    <script src="./lib/vue-router-3.0.1.js"></script>

</head>

<body>

    <style>

        /* 给route-link 元素添加样式 */

        /* .router-link-active{

            font-size: 30px;

            font-weight: 800;

            color: red;

        } */

        .mystyle{

            font-size: 30px;

            font-weight: 800;

            color: red;

        }

        .v-enter,.v-leave-to{

            opacity: 0;

            transform: translate(0,200px)

        }

        .v-enter-active,.v-leave-active{

            transition: all .4s ease-in-out;

        }

    </style>

    <div id="app">

        <!-- <a href="#/log">登录</a>

        <a href="#/zhuce">注册</a> -->

        <!-- router-link 也是router提供的标签，用来监听URL  不用写#号，默认渲染为一个a 标签 -->

        <router-link to="/log" tag="span">登录</router-link>

        <router-link to="/zhuce">注册</router-link>

        <!-- VueRouter提供的元素标签，用来切换路由组件的显示的 -->

        <!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去 -->

        <!-- 所以： 我们可以把 router-view 认为是一个占位符 -->

        <transition mode="out-in">    <!--给route-view 添加动画 必须要使用transition 标签包裹 并设置模式先出后进-->>

            <router-view></router-view>

        </transition>

    </div>

    <script>

        // 组件模板对象，以后定义组件都这么用  别使用template  那个不是组件模板对象

        var log={

            template:"<h1>登录界面</h1>"

        }

        var zhuce={

            template:"<h1>注册界面</h1>"

        }

        // 路由实例

        var vuerouterobj=new VueRouter({

            // route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思

            routes: [// 路由匹配规则

             // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：

            //  属性1 是 path， 表示监听 哪个路由链接地址；

            //  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件

            // 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；

            // { path: '/', component: login },

                {path:'/',redirect:'/log'},// 这里的 redirect path是根路径的时候，页面重定向到登录界面

                {path:'/log',component:log},

                {path:'/zhuce',component:zhuce},

            ],

            // 使用router-link切换组件的时候，默认会给router-link添加上一个类为 router-link-active 一个类名

            // 我们可以使用这个类名来添加样式，或者使用linkActiveClass 修改这个类名（可以修改bootstrapt的类型哦）

            linkActiveClass:"mystyle"

        })

        // Vue实例

        var vm=new Vue({

            el:'#app',

            data:{},

            methods: {

            },

            // 引用路由实例

            router:vuerouterobj   // 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件

        })

    </script>

</body>

</html>

Vue路由的使用和route-link router-view样式和动画的设置的更多相关文章

  1. vue路由中 Navigating to current location ("/router") is not allowed

    报错原因:多次点击同一路由,导致路由被多次添加 解决方法: router/index中添加以下代码: //router/index.js Vue.use(VueRouter) //导入vue路由 co ...

  2. Vue路由模块化的实现方法

    分享一个Vue路由模块化方法,简单实用,好用到飞起 路由模块化 1.router/index.js 配置路由 import Vue from 'vue' import VueRouter from ' ...

  3. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

  4. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

  5. react router @4 和 vue路由 详解(一)vue路由基础和使用

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...

  6. 六、vue路由Vue Router

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

  7. 「vue基础」一篇浅显易懂的 Vue 路由使用指南（ Vue Router 上）

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

  8. vue路由登录拦截(vue router登录权限控制)

    实现原理: 哪些路由需要验证需要在路由文件router/index.js中指定: { path: '/', component: Home, name: 'Home', iconCls: 'fa fa ...

  9. Dynamic Route Matching Vue路由(1)

    Dynamic Route Matching 动态的 路由 匹配 Very often we will need to map routes with the given pattern to the ...

随机推荐

  1. 使用mysqlslap测试MySQL性能

    之前介绍过MySQL的性能测试工具sysbench, 这次介绍一个mysql自带的比较简单的性能测试命令mysqlslap. 下面的指令模拟了1000个进程同事连接mysql,并执行100个查询操作, ...

  2. Nginx日志挂载目录为nfs文件服务器时开机无法自启动的问题解决

    为了方便收集查看日志把nginx日志输出至nfs文件服务器,nfs文件服务器使用autofs自动挂载,nginx和autofs都使用systemctl设置了开机自启动. 但是在重启主机的时候nginx ...

  3. docker之容器日志输出与系统时间相差8小时解决办法

    参考:https://blog.csdn.net/eumenides_/article/details/94719944   https://muguang.me/it/2658.html 使用doc ...

  4. popup demo

    Django下实现: urls.py: from django.conf.urls import url from django.contrib import admin from app01 imp ...

  5. jenkins最新版下载安装

    前提:安装配置 jetty 在线下载jetty# wget http://download.eclipse.org/jetty/8.1.17.v20150415/dist/jetty-distribu ...

  6. [转帖]PCIe 6.0 v0.3版本草案已完稿：2021年转正、x16带宽飙至128GB/s

    PCIe 6.0 v0.3版本草案已完稿:2021年转正.x16带宽飙至128GB/s https://www.cnbeta.com/articles/tech/899389.htm 硬件发展突飞猛进 ...

  7. C++ 获取系统当前时间(日历时)

    获取系统当前时间(日历时) //Linux & C++11 #include <chrono> #include <ctime> using namespace std ...

  8. go语言实现单链表

    线性表包含两种存储方法:顺序存储结构和链式存储结构,其中顺序表的缺点是不便插入与删除数据. 单链表:每个结点包含两部分:数据域+指针域,上一个结点的指针指向下一结点,依次相连,形成链表.特别注意的是每 ...

  9. Java同C#的语法不同之处

    Java同C#的语法不同之处... [注:转载而来但原出处不详:若是您原创请联系我]1,命名空间与包 C#为了把实现相似功能的类组织在一起,引入了命名空间的概念(namespace) Java中与此对 ...

  10. Android—网络请求

    import java.io.ByteArrayOutputStream; import java.io.InputStream; import java.net.HttpURLConnection; ...