Vue路由

最新推荐文章于 2019-03-15 17:58:48 发布

shizhenweiszw

最新推荐文章于 2019-03-15 17:58:48 发布

阅读量95

点赞数

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/shizhenweiszw/article/details/88066169

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、什么是路由

后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）。

二、在Vue中使用路由

如果在一个模块化过程使用路由，必须要通过Vue.use()明确安装路由功能

npm install vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

如果使用全局script标签则无需如此。

1.导入 vue-router 组件类库：

<!-- 1. 导入 vue-router 组件类库 -->
  <script src="./lib/vue-router-2.7.0.js"></script>

2.使用 router-link 组件来导航

<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

3.使用 router-view 组件来显示匹配到的组件

<router-view></router-view>

4.创建使用Vue.extend创建组件

 // 4.1 使用 Vue.extend 来创建登录组件
    var login = Vue.extend({
      template: '<h1>登录组件</h1>'
    });

    // 4.2 使用 Vue.extend 来创建注册组件
    var register = Vue.extend({
      template: '<h1>注册组件</h1>'
    });

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
    <style>
        /*设置选中路由高亮方式一*/
        .router-link-active{
            font-size: 18px;
            font-weight: bold;
            color: #ffffff;
            background-color: #2e6da4;
        }
        /*设置选中路由高亮方式二*/
        .myActive{
            color: red;
        }
        /*定义切换动画*/
        .v-enter,
        .v-leave-to{
            transform: translateX(100px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.3s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--<a href="#/login">登录</a>-->
        <!--<a href="#/register">注册</a>-->
        <!--router-link默认渲染为a标签-->
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="/register">注册</router-link>
        <transition mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
<script>
    //登录组件的模板对象
    var login = {
        template:'<h1>这是登录组件</h1>'
    }
    //注册组件的模板对象
    var register = {
        template: '<h1>这是注册组件</h1>'
    }
    var vueRouterObj = new VueRouter({
        //routes表示路由匹配规则
        routes: [
            /*
            * 每个路由规则都是一个对象,这个对象有两个必须属性
            * 属性1：path 表示监听哪个路由链接地址
            * 属性2：component,表示路由如果匹配到path,则展示component对应的那个组件
            */
            {path:'/login',component:login},
            {path:'/register',component:register},
            //默认显示登录组件
            {path:'/',redirect:'/login'}
        ],
        //设置选中路由高亮方式二
        linkActiveClass:'myActive'
    });
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        //将路由规则注册到vm实例上，用来监听URL地址变化，然后展示对应组件
        router: vueRouterObj
    });
</script>
</body>
</html>

shizhenweiszw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue路由

一、什么是路由后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区...
复制链接

扫一扫