1. 我们主要在index.js重新设置路由的重新定向redirect参数

index.js

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import HelloWorld from '@/components/HelloWorld'
  4. import Params from '@/components/Params'
  5. Vue.use(Router)
  6.  
  7. export default new Router({
  8. routes: [
  9. {
  10. path: '/',
  11. name: 'HelloWorld',
  12. component:HelloWorld
  13. },{
  14. path:'/params/:Id/:Title',
  15. component:Params
  16.  
  17. },{
  18. path:'/goHome',
  19. redirect:'/'
  20. },
  21. {
  22. path:'/goparams/:Id/:Title',
  23. redirect:'/params/:Id/:Title' //这里对应的是重定向的path path:'/params/:Id/:Title',
  1. } ] })

  2.在App.vue 设置vue-router

<router-link to="/">首页</router-link>
<router-link to="/params/2018-6-18/世界杯">params</router-link> |
<router-link to="/goHome">go 首页</router-link>
<router-link to="/goparams/2018-6-19/我们">GOparams</router-link>

  效果:

vue-router 的重定向-redirect的更多相关文章

  1. [Vue]vue中路由重定向redirect

    1.重定向的地址不需要接收参数 const routes = [ { path: '/', redirect: '/index'}, { path: '/index', component: inde ...

  2. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  3. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  4. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  5. Vue Router的入门以及简单使用

    Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...

  6. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  7. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  8. 8. Vue - Router

    一.Vue Router 的使用 JavaScript: 1.创建组件:创建单页面应用需要渲染的组件 2.创建路由:创建VueRouter实例 3.映射路由:调用VueRouter实例的map方法 4 ...

  9. 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

  10. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

随机推荐

  1. 20140610 PP中可以绘制表格;PPT组合之后再加效果

    PPT绘制表格(行人检测的cell和block) 动画:组合之后再加效果

  2. java 生成随机数字+字母组合 和字母组合

    生成随机数包含数字,字母 /** * 生成随机数当作getItemID * n : 需要的长度 * @return */ private static String getItemID( int n ...

  3. <软件测试>软件测试

    1.软件测试基础 软件测试工程师:查找错误和缺陷,然后要求开发人员进行修改,保证软件质量. 漏洞(360安全漏洞):硬件,软件,协议的具体实现或系统安全策略存在缺陷,从而可以使攻击者在未授权的情况下破 ...

  4. <Linux>Linux基础学习(兄弟连版本)

    1.Linux系统简介 1.1 Unix与Linux发展史 父子关系:Unix 是Linux的前身 1969年,肯丶汤姆森开发Unix系统(为了加快玩游戏的速度 - -,自己开发的系统) 1971年, ...

  5. 本地调试H5页面

    摘要 详细讲述微信H5页面调试(安装在安卓或iOS手机上的),钉钉内H5页面的调试,QQ.微博以及各浏览器上H5页面的调试方法 背景 大学毕业快要一年了,用leader的话说我也是有一年开发经验的前端 ...

  6. 22-5-join

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. WXML 数据绑定

  8. Java内存管理简述

    转自:http://www.codeceo.com/article/java-memory-area.html 一.概述 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干不同的数据 ...

  9. The chance for love doesn't come around every day.

    The chance for love doesn't come around every day.爱的机会不是每天都有的.

  10. Struts2入门的第一个应用

    今天开始学习struts2技术,现在struts2的技术已经超过了struts1,所以本人就没有学习struts1了,当然这个肯定不会影响我们后面的学习,先来看一下工程的目录结构: 说明: query ...