vue

#vue| 来源: 网络整理| 查看: 265

十一、vue-router路由

Vue Router是Vue.js官方的路由管理器（路径跳转）。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有:

嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于Vue.js过渡系统的视图过渡效果细粒度的导航控制带有自动激活的CSS class的链接HTML5历史模式或hash模式，在IE9中自动降级自定义的滚动条行为 1. 安装

基于第一个vue-cli进行测试学习;先查看node_modules中是否存在 vue-router vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev

安装完之后去node_modules路径看看是否有vue-router信息有的话则表明安装成功。

2. vue-router demo实例

将之前案例由vue-cli生成的案例用idea打开

清理不用的东西 assert下的logo图片 component定义的helloworld组件我们用自己定义的组件

清理代码以下为清理之后的代码 src下的App.vue 和main.js以及根目录的index.html 这三个文件的关系是 index.html 调用main.js 调用App.vue

index.html:

myvue

main.js:

import Vue from 'vue' import App from './App' import router from './router' //自动扫描里面的路由配置 Vue.config.productionTip = false new Vue({ el: '#app', //配置路由 router, components: { App }, template: '' })

App.vue:

迪师傅首页内容页 Kuang export default { name: 'App', components: { } } #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; }

在components目录下创建一个自己的组件Content,Test,Main(这两个和Content内容一样的就不放示例代码了

Content.vue:

内容 export default { name: "Content" }

安装路由,在src目录下,新建一个文件夹 : router,专门存放路由 index.js(默认配置文件都是这个名字)

import Vue from "vue"; import VueRouter from "vue-router"; import Content from "../components/Content"; import Main from "../components/Main"; import Kuang from "../components/Kuang"; //安装路由 Vue.use(VueRouter); //配置导出路由 export default new VueRouter({ routes: [ { //路由路径 path: '/content', name: 'content', //跳转的组件 component: Content }, { //路由路径 path: '/main', name: 'main', //跳转的组件 component: Main }, { //路由路径 path: '/kuang', name: 'kuang', //跳转的组件 component: Kuang } ] })

在main.js中配置路由

main.js:

在App.vue中使用路由

App.vue:

启动测试一下： npm run dev

项目结构图&运行效果图

在这里插入图片描述

十二、路由嵌套

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。

Demo

创建用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件；

Profile.vue

个人信息 export default { name: "UserProfile" }

在用户列表组件在 views/user 目录下创建一个名为 List.vue 的视图组件；

List.vue

用户列表 export default { name: "UserList" }

修改首页视图，我们修改 Main.vue 视图组件，此处使用了 ElementUI 布局容器组件，代码如下：

Main.vue

用户管理个人信息用户列表内容管理分类管理内容列表个人信息退出登录 export default { name: "Main" } .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; }

配置嵌套路由修改 router 目录下的 index.js 路由配置文件，使用children放入main中写入子模块，代码如下

index.js

import Vue from "vue"; import Router from "vue-router"; import Main from "../views/Main"; import Login from "../views/Login"; import UserList from "../views/user/List"; import UserProfile from "../views/user/Profile"; Vue.use(Router); export default new Router({ routes: [ { path: '/main', component: Main, //路由嵌套 children: [ {path: '/user/profile',component: UserProfile}, {path: '/user/list',component: UserList} ] }, { path: '/login', component: Login } ] });

路由嵌套效果图

在这里插入图片描述

拓展：vue router跳转方法

1.this.$router.push()

描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。

用法：在这里插入图片描述

2.this.$router.replace()

描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

3.this.$router.go(n)

相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面

在这里插入图片描述

【本文地址】

公司简介

联系我们