AI专业者开发社区 1 号成员
  •  0 回帖  •  35 浏览  •  4 个月前
 

vue-router

官方文档：

旧版：https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn

新版：http://router.vuejs.org/（2.0 版本）

此文是旧版

文件结构图：

基本用法：

<router-view> 是一个顶级的路由外链，用于渲染匹配的组件。

例如：我的应用入口是 app.vue

那么在 app.vue 中添加如下代码， 此处涉及 ES6，可以先看下这篇文章：http://www.csdn.net/article/2015-04-30/2824595-Modules-in-ES6

app.vue

<template>
    <div class='page index-content'>
        <router-view class="view"
        keep-alive
        transition="slide"></router-view>
        <Footers></Footers>
    </div>
</template>
<script>
/*
*ES6 模块系统特性:
1. 使用 export 关键词导出对象。这个关键字可以无限次使用；
2. 使用 import 关键字将其它模块导入某一模块中。它可用来导入任意数量的模块；
3. 支持模块的异步加载；
4. 为加载模块提供编程支持。
*/
//导入 footer 组件
import Footers from '../components/footer'
//导入路由
import Router from 'vue-router'
//default 导出，使用关键字 default，可将对象标注为 default 对象导出。default 关键字在每一个模块中只能使用一次。它既可以用于内联导出，也可以用于一组对象导出声明中。
export default{
    components:{Footers}
}
</script>

Footer 是一个公用的页脚组件，存放于 components 文件夹中

footer.vue

<template>
    <div class='footer'>
        <a v-link="{path:'/home'}">
            <span v-if="$route.name =='home'" class='active'>首页</span>
            <span v-else>首页</span>
        </a>
        <a v-link="{path:'/list'}">
            <span v-if="$route.name =='list'" class='active'>跳转 1</span>
            <span v-else>跳转 1</span>
        </a>
        <a v-link="{path:'/account'}">
            <!-- 根据路由名称判断选中的项 -->
            <span v-if="$route.name =='account'" class='active'>跳转 2</span><!-- 满足条件 -->
            <span v-else>跳转 2</span><!--不满足-->
        </a>
    </div>
</template>
<style>
    .footer{
        background: #fff;
        border-top: 1px solid #dedede;
        display: table;
    }
    .footer a{
        display: table-cell;
        text-align: center;
        text-decoration: none;
        color: #666
    }
    .active{
        color:red !important;
    }
</style>

由于 app.vue 是最顶级的入口文件，在 app.vue 中引用 footer 组件的话，所有页面都会包含 footer 内容，但是二级页面等子页面不需要，所以得把 app.vue 中代码复制到 index.vue 中，把 app.vue 中 footer 相关的部分删掉。

在 index.html 中添加如下代码，创建一个路由实例。

<app></app>

在 main.js 中配置 route.map

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'//导入 vue-router
//导入组件
import App from './App'
import Index from './page/index'
import list from './page/list'
import Home from './page/home'
import Account from './page/account'
Vue.use(VueRouter)
var router = new VueRouter()
router.map({
    //默认指向 index
    '/':{
        name:'index',
        component:Index,
        //子路由 (有页底)
        subRoutes:{
            '/home':{
                name:'home',
                component:Home
            },
            '/account':{
                name:'account',
                component:Account
            }
        }
    },
    //没有 footer
    '/list':{
        name:'list',
        component:list
    }
})
//启动一个启用了路由的应用
router.start(App,'app')

router.start 中的 'app'，指的是 index 中的：<app></app>，可以取其他的名字，但是得和 index 中的名字一致。

这时启动项目（npm run dev）会发现，页面上只有 footer，而没有显示其他内容。因为 index.vue 本来就只有 footer 而没有其他内容，但是我们肯定要显示页面，就要用到

router.redirect(redirectMap) 重定向

例如：我们要默认载入 home 页面

在 main.js 中加入

//重定向到 home
router.redirect({
    '*':'home'
})router.start(App,'app')

 在 index 中加入 init() 函数

<script>
export default{
    components:{Footers},
    init(){
        var router = new Router()
          router.go('/home');//跳转到 home 组件
        }
}
</script>

然而，经过测试，redirect 并没有重定向的 home，载入 home 的真正原因是：router.go('/home')

此时，进入项目就会显示 home 页面的内容了。

路由规则和路由匹配

Vue-router 做路径匹配时支持动态片段、全匹配片段以及查询参数（片段指的是 URL 中的一部分）。对于解析过的路由，这些信息都可以通过路由上下文对象（从现在起，我们会称其为路由对象）访问。 在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。

$route.path

字符串，等于当前路由对象的路径，会被解析为绝对路径，例如：/list，来源于 route.map 中配置的路径

router.map({
   '/home':{
    name:'list',
    component:Home
    } 
})

dom 中

<a v-link="{path:'/list'}"> 前往 list 列表页面</a>

或者（具名路径）

<a v-link="{name:'list'}">前往 list 列表页面</a>

带参数跳转（例如：从列表页跳转到列表详情页）

<ul>
    <li v-for="item in alllist">
        <!--点击跳转到详情-->
        <a v-link="{name:'listDetail',params:{id: item.id}}">
            {{item.title}}<!--标题 -->
        </a>
    </li>
</ul>

script。

Promise & ES6 详见 vue-router 的 data 部分： http://router.vuejs.org/zh-cn/pipeline/data.html

<script>
export default{data(){
        return{alllist:[]
        }
    },
    route:{data({to}){
            return Promise.all([
                //获取数据
                this.$http.get('http://192.168.0.1/knowledge/list',{'websiteId':2,'pageSize':5,'pageNo':1,'isTop':1})]).then(function(data){
                return{
                    //将获取到的数据复制给 allllist 数组
                    alllist:data[0].data.knowledgeList
                }
            },function(error){
                //error
            })}}
}
</script>

 详情页代码

<div class='article-box' v-if="!$loadingRouteData">
    <p class='font-bigger'>{{listDetail.title}}</p>
    <p class='co9a9a9a article-time'><span>阅读：{{listDetail.viewTimes}}</span><span>发布时间: {{listDetail.publishTime | timer}}</span></p>
    <div class='content-img'>
       {{{listDetail.content}}}<!--读取富文本信息-->
    </div>
</div>
<script>
export default{data() {
        return{listDetail:[],
            routeid:''
            //若不是走路由，采用另一种方式获取
            //routeid:this.$route.query.id
        }
    },
    route:{
        //id: 来源于 a 标签的参数
        data ({to:{params:{ id}}}) {
            var that = this ; 
            that.$set('routeid',id)//获取 id
            return Promise.all([
                that.$http.get('http://192.168.0.1/rest/knowledge',{'id':id}),]).then(function(data){console.log(data)
                     return{
                        listDetail:data[0].data.knowledge,
                    } 
            })}},
    methods:{collect(){

    }
},
ready(){
    </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> that </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">this</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;
    console.log(that.$get(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">routeid</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">)) </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">得到传进来的id</span>



    }
}
</script>

 此时 router 要做下修改

'/list':{
    name:'list',
    component:GetReceipt
},
'/listDetail/:id':{
    name:'listDetail',
    component:GetReceiptDetail
}