zoukankan      html  css  js  c++  java
  • Vue.js系列之vue-router(上) (转载自向朔1992)

    概述

    Vue非常适用于实践单页面应用程序也就是平时大家说的比较多的SPA(single page application),这点应该了解过Vue的应该都知道吧。一般的单页面应用是基于路由或页面之间的链接来形成的,Vue是基于路由和组件的,所以我们今天就来了解下vue-router。vue-router是Vue.js官方的路由插件,它和vue.js深度集成,用于设定访问路径,并将路径和组件映射起来,我们给每个组件一个路由地址,跳转路由相当于组件切换。vue-router的内容还是比较多的,这里我只分享我自己项目中用到的地方,其他地方大家可以看文档啦。

    开始使用vue-router

    这里我假设大家之前都用模块工程的方式实践了一个vue Demo,在此基础上我们添加vue-router。
    1.安装
    npm install vue-router 

    2.在项目main.js中安装路由插件

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

    footer.vue组件

    <template>  
        <div class="footer">  
            <div class="readType" v-if="readType.count">{{readType.count}}</div>  
            <ul class="main-nav">  
                <li>  
                    <router-link to="/home">  
                        <i class="icon-nav icon-nav1"></i><span>首页</span>  
                    </router-link>  
                </li>  
                <li>  
                    <router-link to="/quan" v-bind:class="{rrouter:activ}">  
                        <i class="icon-nav icon-nav2"></i><span>学友圈</span>  
                    </router-link>  
                </li>  
                <li>  
                    <router-link to="/friend">  
                        <i class="icon-nav icon-nav3"></i><span>学友</span>  
                    </router-link>  
                </li>  
                <li>  
                    <router-link to="/find">  
                        <i class="icon-nav icon-nav4"></i><span>发现</span>  
                    </router-link>  
                </li>  
                <li>  
                    <router-link to="/mine">  
                        <i class="icon-nav icon-nav5"></i><span>我的</span>  
                    </router-link>  
                </li>  
            </ul>  
        </div>  
    </template>  

    这里有几点需要知道:

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

    2.通过传入 `to` 属性指定链接.

    3.<router-link> 默认会被渲染成一个 `<a>` 标签

    路由出口

    我们前面说了,路由跳转就是相应组件在渲染,那么渲染的内容是怎么显示也页面中的呢,那就是路由出口'<router-view></router-view>'做的事了,路由匹配到的组件将渲染在这里。

    路由出口我们可以设置在当前组件中也可以设置在其他组件中,项目中我们就将所有组件都渲染在最大的容器App.vue组件中(我们项目中App组件只作为渲染容器)。

    <template>  
      <div id="app">  
        <router-view></router-view>  
      </div>  
    </template>  

    JavaScript

    定义路由文件可以直接写在main.js文件中,也可以新建一个js文件,因为我们的组件比较多,所以单独把路由拿出来写了一个router.js文件。

    // 0. 如果使用模块化机制编程,进入Vue和VueRouter,要调用 Vue.use(VueRouter)  
    import Vue from 'vue'  
    import VueRouter from 'vue-router'  
    Vue.use(VueRouter)  
      
    // 1. 定义(路由)组件。  
    // 可以从其他文件 import 进来,我们一般都是建好了组件再来写路由的  
    // 所以就会有好多这样的语句。  
    import home from "./components/home"  
    import login from "./components/login"  
      
    // 2. 定义路由  
     const routes = [ //这里跟1.x有挺大区别,有接触的自己看清楚哦  
        {  
          path: '/',    //浏览器网路请求走通之后默认就会去找域名下的根目录,  
          name: 'home', //所以我们就把这个组件作为默认首页  
          component: home  
        },  
        {  
          path: '/login',  
          name: 'login',  
          component: login  
        }  
       ]  
      
    // 3. 创建 router 实例,然后传 `routes` 配置  
    // 你还可以传别的配置参数, 不过先这么简单着吧。  
    const router = new VueRouter({      //你就当const是var  
      routes  
    //(缩写)相当于 routes: routes  
    })  
      
    // 4. 创建和挂载根实例。  
    // 记得要通过 router 配置参数注入路由,  
    // 从而让整个应用都有路由功能  
    const app = new Vue({  
      router  
    }).$mount('#app')  
    // 现在,应用已经启动了!  

    总结

    上篇先分享到这里,主要了解了有以下几点:
    1.vue-router的安装和使用
    2.在组件模板中的书写格式
    3.知道了路由出口
    4.如何定义一个路由
    5.创建路由实例和挂载实例

  • 相关阅读:
    android:descendantFocusability用法简析
    离开自己的安乐窝
    Android Material Design 中文版
    android Material
    jquery 效果网址分享
    Android判断TextView是否超出加省略号
    如何摆脱工具类
    android 框架
    gridview 横向滚动 一行显示
    自定义 spinner
  • 原文地址:https://www.cnblogs.com/wujiaqi/p/7767249.html
Copyright © 2011-2022 走看看