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

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Params from '@/components/Params'
Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
},{
path:'/params/:Id/:Title',
component:Params },{
path:'/goHome',
redirect:'/'
},
{
path:'/goparams/:Id/:Title',
redirect:'/params/:Id/:Title' //这里对应的是重定向的path path:'/params/:Id/:Title',
} ] })

  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. JAVA API 实现hdfs文件操作

    java api 实现hdfs 文件操作会出现错误提示: Permission denied: user=hp, access=WRITE, inode="/":hdfs:supe ...

  2. 记一次批量修改SQLServer表数据

    前提: 1.数据有上百万条,分成10几张excel表,从数据库中导出,由业务部门修改: 2.数据没什么规律: 3.和数据库DB商量后决定先把从excel导进数据库中,再通过关联查询修改数据 将 Exc ...

  3. 计算机基础、python历史,环境,分类,安装

    一.计算机基础 CPU:大脑,处理数据,计算 内存:临时储存数据,运行速度快,成本高,断电数据会消失:4G,8G,16G,32G 硬盘:1T,固态硬盘,机械硬盘:储存数据,文件,能长久保存 操作系统: ...

  4. 净心诀---python3生成器

    生成器的作用----减少程序运行的内存开销 生成器特点: 1.一个一个的取值,而不是一次性把所有数据创建出来,迭代器中的数据不取不创建2.只能按照顺序取,不能跳过也不能回头3.一个迭代器中的数据只能从 ...

  5. str2int HDU - 4436 后缀自动机求子串信息

    题意: 给出 n 个串,求出这 n 个串所有子串代表的数字的和. 题解; 首先可以把这些串构建后缀自动机(sam.last=1就好了), 因为后缀自动机上从 root走到的任意节点都是一个子串,所有可 ...

  6. 关于memset赋值无穷大无穷小

    memset(a,,sizeof(a)); 即得到无穷大. memset(a,,sizeof(a)); 即得到无穷小,与上述的值互为相反数. memset(a,,sizeof(a)); 即近似为第一个 ...

  7. 【Codeforces】450 B(div2)

    题目链接:http://codeforces.com/problemset/problem/450/B 题意: 求这个的第n项. 题解:$f_{i+1} = f_i - f_{i-1} $ \begi ...

  8. kafka消息深入学习

    Kafka是一个分布式的基于发布/订阅模式的消息队列,主要应用于大数据实时处理领域. 1  快写  快读 看下面的图: 传统应用是  硬件到缓存,到应用 再socket进行传输,再进行网络传输,再到用 ...

  9. .net core 下的跨域设置

    1.CORS中间件处理跨源请求.以下代码为具有指定源的整个应用程序启用CORS: public void Configure(IApplicationBuilder app, IHostingEnvi ...

  10. box-shadow单侧投影,双侧投影,不规则图案投影

    底部投影box-shadow: 0 5px 4px -4px black; 底部右侧投影 3px 3px 6px -3px black 两侧投影 box-shadow: 7px 0 7px -7px ...