一、准备工作

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路由的配置的更多相关文章

  1. Vue 路由模块化配置

    博客地址:https://ainyi.com/77 企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化 分享两个解决方案 -- Vue 路由配置 ...

  2. Vue路由相关配置

    什么是路由? 1.在以前页面跳转使用的是超链接a标签或者js location.href,而路由是跳转切换组件的跳转方式 2.路由就是监听url的改变并提供相对应的组件用于展示 3.vue-route ...

  3. vue路由的两种模式配置以及history模式下面后端如何配置

    vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变has ...

  4. vue 路由(二级)配置及详细步骤

    1.安装插件(可以选择在初始化项目的时候安装) cnpm install vue-router --save-dev 2.将插件全局引入到项目中(main.js) import VueRouter f ...

  5. vue 模块化 路由拆分配置

    一.普通路由配置 通常我们编写vue路由配置都会写在 /src/router/index.js 这个文件下.但是,随着我们的vue项目变得越来越大后,路由也随之变得越来越多,出现的问题就是我们所有的路 ...

  6. 简单配置Vue路由

    简单配置Vue路由 1.  创建一个单文件组件Test.vue <template> <div>Test</div> </template> <s ...

  7. npm vue路由配置

    npm vue路由 复习:1.README.md文件:保存如何使用的命令 (1)     npm install:拷项目时可以不拷node_modules文件,运行该命令时,会自动下载node_mod ...

  8. K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序

    背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...

  9. vue路由的简单实例

    vue2.0 和 vue1.0 路由的语法还是有点稍微的差别,下面介绍一下vue-router 2的简单实例: <!DOCTYPE html> <html lang="en ...

随机推荐

  1. Swift5 语言指南(十六) 初始化

    初始化是准备要使用的类,结构或枚举的实例的过程.此过程涉及为该实例上的每个存储属性设置初始值,并执行在新实例准备好使用之前所需的任何其他设置或初始化. 您可以通过定义实现这个初始化过程初始化,这就像特 ...

  2. itext实现合同尾部签章部分自动添加,定位签名

    使用的pom <!-- pdf处理 start--> <dependency> <groupId>com.itextpdf</groupId> < ...

  3. JAVA学习路线——匹马行天下

  4. javascript Location对象属性和方法

    Location对象 Location对象包含有关当前URL的信息 https://blog.csdn.net/u010953692/article/details/80901035#3 https( ...

  5. 机器学习技法笔记:02 Dual Support Vector Machine

    Roadmap Motivation of Dual SVM Lagrange Dual SVM Solving Dual SVM Messages behind Dual SVM Summary

  6. mac的safari浏览器调试ios手机网页

    iOS 6给Safari带来了远程的Web检查器工具. 一.参考链接 ios开发者文档 safari开发者工具 remote debugging safari 二.设置iphone 设置 -> ...

  7. Python九九乘法表三种方案

    方法一: row = 1 # 定义起始行 while row <= 9: # 最大打印 9 行 col = 1 # 定义起始列 while col <= row: # 最大打印 row 列 ...

  8. python(31)——【sys模块】【json模块 & pickle模块】

    一.sys模块 import sys sys.argv #命令行参数List,第一个元素是程序本身路径 sys.exit() #退出程序,正常退出时exit(0) sys.version #获取pyt ...

  9. 让Java线程池实现任务阻塞执行的一种可行方案

    Java的线程池一般是基于concurrent包下的ThreadPoolExecutor类实现的, 不过当我们基于spring框架开发程序时, 通常会使用其包装类ThreadPoolTaskExecu ...

  10. tomcat8 JVM 优化

    在Linux环境下设置Tomcat JVM,在/opt/tomcat/bin/catalina.sh文件中找到"# ----- Execute The Requested Command&q ...