vue路由的配置
一、准备工作
1安装vue-cli npm install vue-cli -g
2检查是否安装成功 vue -V(大写V)
3初始化一个新的项目 vue init webpack vue-demo
进入项目目录 npm install npm run dev
二、配置路由
1我们可以看到生成的router文件夹下面有个index.js
首先我们先在components下新建几个组件,如HelloWorld.vue \ Home.vue 在index.js中引入 ,路由配置如下 index.js
import Home from '@/components/Home';
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
//默认路径下显示该路由
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},{
path: '/home',
name: 'Home',
component: Home
}
]
})
注意:在创建的 router 对象中,如果不配置 mode,就会使用默认的 hash 模式,该模式下会将路径格式化为 #! 开头。
添加 mode: 'history' 之后将使用 HTML5 history 模式,该模式下没有 # 前缀,而且可以使用 pushState 和 replaceState 来管理记录。
2App.vue作为一个存放组件的入口容器,其中 <router-view> 是用来渲染通过路由映射过来的组件,当路径更改时,<router-view> 中的内容也会发生更改
上面已经配置了两个路由,当打开 http://localhost:8080 或者 http://localhost:8080/home 的时候,就会在 <router-view> 中渲染 home.vue 组件。Home相当于是这个页面的主界面,其他的页面都是嵌套在这个页面里面的,所以有动态变化的地方都要有<router-view>,如果被嵌入的页面部分下还有下一级页面,则需要在一级路由中嵌套二级路由,修改router/index.js
routes: [
//默认路径下显示该路由
{
path: '/',
name: 'home',
component: Home,
children:[
{path:'/',
component:Login
}
]
},{
path: '/hello',
name: 'helloWorld',
component: HelloWorld
}
]
在配置的路由后面,添加 children,并在 children 中添加二级路由,就能实现路由嵌套
配置 path 的时候,以 " / " 开头的嵌套路径会被当作根路径,所以子路由的 path 不需要添加 " / "
三、使用 <router-link> 映射路由
我们在index页面里面加上映射路由,使其进行调转。
首先我们在login登录加一个路由跳转,也称为编程式导航
this.$router.push(location) 来修改 url,完成跳转
push 后面可以是对象,也可以是字符串:
// 字符串 this.$router.push('/home/first') // 对象 this.$router.push({ path: '/home/first' }) // 命名的路由 this.$router.push({ name: 'home', params: { userId: wise }})//传参的形式
然后,进入index页面后,设置两个router-link,在编译之后,<router-link> 会被渲染为 <a> 标签, to 会被渲染为 href,当 <router-link> 被点击的时候,url 会发生相应的改变,如果对于所有 ID 各不相同的用户,都要使用 home 组件来渲染,可以在 index.js 中添加动态参数:
这样 "/home/user01"、"/home/user02"、"/home/user03" 等路由,都会映射到 Home 组件
然后还可以使用 $route.params.id 来获取到对应的 id
跳转时的传参:
this.$router.push(`/index/${this.username}`);
路由的参数配置
{
path:'/index/:id',
component:index
},
跳转后的参数接收:
created(){
this.usname = this.$route.params.id;
}
最后,在index.vue中写好路由跳转router-link
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld';
import Home from '@/components/Home';
import Login from '@/components/Login';
import index from '@/components/index';
import Register from '@/components/Register';
Vue.use(Router) export default new Router({
mode:'history',
routes: [
//默认路径下显示该路由
{
path: '/',
name: 'home',
component: Home,
children:[
{path:'/',
component:Login
},
{
path:'/index/:id',
component:index
},
{
path:'register',
component:Register
}
]
},{
path: '/hello',
name: 'helloWorld',
component: HelloWorld
}
]
})
运行后界面如图:
好了,今天的路由配置与跳转就讲到这里,下次我们继续动态路由的配置讲解步骤。
vue路由的配置的更多相关文章
- Vue 路由模块化配置
博客地址:https://ainyi.com/77 企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化 分享两个解决方案 -- Vue 路由配置 ...
- Vue路由相关配置
什么是路由? 1.在以前页面跳转使用的是超链接a标签或者js location.href,而路由是跳转切换组件的跳转方式 2.路由就是监听url的改变并提供相对应的组件用于展示 3.vue-route ...
- vue路由的两种模式配置以及history模式下面后端如何配置
vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变has ...
- vue 路由(二级)配置及详细步骤
1.安装插件(可以选择在初始化项目的时候安装) cnpm install vue-router --save-dev 2.将插件全局引入到项目中(main.js) import VueRouter f ...
- vue 模块化 路由拆分配置
一.普通路由配置 通常我们编写vue路由配置都会写在 /src/router/index.js 这个文件下.但是,随着我们的vue项目变得越来越大后,路由也随之变得越来越多,出现的问题就是我们所有的路 ...
- 简单配置Vue路由
简单配置Vue路由 1. 创建一个单文件组件Test.vue <template> <div>Test</div> </template> <s ...
- npm vue路由配置
npm vue路由 复习:1.README.md文件:保存如何使用的命令 (1) npm install:拷项目时可以不拷node_modules文件,运行该命令时,会自动下载node_mod ...
- K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序
背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...
- vue路由的简单实例
vue2.0 和 vue1.0 路由的语法还是有点稍微的差别,下面介绍一下vue-router 2的简单实例: <!DOCTYPE html> <html lang="en ...
随机推荐
- Swift5 语言指南(十六) 初始化
初始化是准备要使用的类,结构或枚举的实例的过程.此过程涉及为该实例上的每个存储属性设置初始值,并执行在新实例准备好使用之前所需的任何其他设置或初始化. 您可以通过定义实现这个初始化过程初始化,这就像特 ...
- itext实现合同尾部签章部分自动添加,定位签名
使用的pom <!-- pdf处理 start--> <dependency> <groupId>com.itextpdf</groupId> < ...
- JAVA学习路线——匹马行天下
- javascript Location对象属性和方法
Location对象 Location对象包含有关当前URL的信息 https://blog.csdn.net/u010953692/article/details/80901035#3 https( ...
- 机器学习技法笔记:02 Dual Support Vector Machine
Roadmap Motivation of Dual SVM Lagrange Dual SVM Solving Dual SVM Messages behind Dual SVM Summary
- mac的safari浏览器调试ios手机网页
iOS 6给Safari带来了远程的Web检查器工具. 一.参考链接 ios开发者文档 safari开发者工具 remote debugging safari 二.设置iphone 设置 -> ...
- Python九九乘法表三种方案
方法一: row = 1 # 定义起始行 while row <= 9: # 最大打印 9 行 col = 1 # 定义起始列 while col <= row: # 最大打印 row 列 ...
- python(31)——【sys模块】【json模块 & pickle模块】
一.sys模块 import sys sys.argv #命令行参数List,第一个元素是程序本身路径 sys.exit() #退出程序,正常退出时exit(0) sys.version #获取pyt ...
- 让Java线程池实现任务阻塞执行的一种可行方案
Java的线程池一般是基于concurrent包下的ThreadPoolExecutor类实现的, 不过当我们基于spring框架开发程序时, 通常会使用其包装类ThreadPoolTaskExecu ...
- tomcat8 JVM 优化
在Linux环境下设置Tomcat JVM,在/opt/tomcat/bin/catalina.sh文件中找到"# ----- Execute The Requested Command&q ...