Vue.js 学习日志——路由（十一）

Vue.js 路由（Vue-router）

这个路由是指SPA（单页应用）的路径管理器，它和vue.js深度集成，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射。传统的单页面应用是用一些超链接来实现页面切换和跳转。路由模块的本质就是建立起url和页面之间的映射关系。

---

• 初始化项目

使用vue-cli 命令创建项目，在 Install vue-router? 这一步选择Y进行安装路由。

默认进去项目中就有 vue-router 的配置，目录中有一个 router 目录和 index.js 文件。

 

• 文件分析

router 目录下的 index.js 路由配置文件

main.js 文件

App.vue 文件

<router-view/>路由组件要显示的地方，默认路由为HelloWorld组件。

• 修改 demo 达到路由跳转效果

在 components 目录下添加 Home.vue 文件作为默认主页路由组件。

<router-link>组件支持路由导航功能，to: 目标路由的链接，相当于a标签的href属性；必须；调用的是router.push()方法，将to的值传入router.push()里。

<template>
    <div>
        <router-link to="/page1">分页1</router-link>
        <router-link to="/page2">分页2</router-link>
    </div>
</template>

<script>
export default {
    name:'home',
    data() {
        return {
            
        }
    }
}
</script>

<style>

</style>

在 components 目录下添加 Page1.vue、Page2.vue 文件作为分页组件。

<template>
    <div>
        <router-link to="/">返回主页</router-link>
        <h1>这里是分页1</h1>
    </div>
</template>

<script>
export default {
    name:'page1',
    data() {
        return {
            
        }
    }
}
</script>

<style>

</style>

修改 router/index.js 路由配置文件

进入项目下，执行 cnpm run dev 运行项目查看效果

• <router-link> 标签中的 to 传参

我们将上面的demo改写成功只要一个Page组件，“分页数”由参数传递。

在 components 目录下添加 Page.vue 文件作为分页组件。

<template>
    <div>
        <!-- 定义个button按钮,加个click事件,back方法 -->
        <button @click="back">返回上一页</button>
        <!-- 显示接收到的pagename参数 -->
        <h1> {{this.$route.params.pagename}} </h1>
    </div>
</template>

<script>
export default {
    name:'page',
    data() {
        return {
        }
    },
    methods:{
        back(){
            this.$router.go(-1) //回退到上一个界面
        }
    }
}
</script>

<style>

</style>

修改路由配置文件 index.js

import Vue from 'vue'
import Router from 'vue-router'
//import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Page from '@/components/Page'
// import Page1 from '@/components/Page1'
// import Page2 from '@/components/Page2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/page',
      name: 'page',
      component: Page
    }
  ]
})

修改主页 Home.vue 文件

<template>
    <div>
        <!-- 使用:to传递参数,name为index.js中配置的路由名称,params为参数对象 -->
        <router-link :to="{name:'page',params:{pagename:'分页1'}}">分页1</router-link>
        <br>
        <!-- 定义单击事件调用tran方法 -->
        <button @click="tran('分页2')">分页2</button>
        <br>
        <!-- 使用:to传递参数,path为index.js中配置的路由路径,params为参数对象 -->
        <router-link :to="{page:'/page',params:{pagename:'分页3'}}">分页3</router-link>
    </div>
</template>

<script>
export default {
    name:'home',
    data() {
        return {
            
        }
    },
    methods:{
        tran(paname){//定义than方法,paname参数
            //使用 this.$router.push 编程式跳转
            this.$router.push({name:'page',params:{pagename:paname}})
        }
    }
}
</script>

<style>

</style>

进入项目下，执行 cnpm run dev 运行项目查看效果

• vue-router 通过url传递参数

修改路由

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/page/:pagename',
      name: 'page',
      component: Page
    }
  ]
})

主页中加入 <router-link> 标签

<router-link to="/page/分页4">分页4</router-link>