路由就是让根组件动态得去挂载其他组件;

步骤:

  1. //路由配置:
  2.  
  3. //.安装
  4.  
  5. npm install vue-router --save / cnpm install vue-router --save
  6.  
  7. //、引入并 Vue.use(VueRouter) (main.js)
  8.  
  9. import VueRouter from 'vue-router'
  10.  
  11. Vue.use(VueRouter)
  12.  
  13. //、配置路由
  14.  
  15. 、创建组件 引入组件
  16.  
  17. 、定义路由 (建议复制)
  18.  
  19. const routes = [
  20. { path: '/foo', component: Foo },
  21. { path: '/bar', component: Bar },
  22. { path: '*', redirect: '/home' } /*默认跳转路由*/
  23. ]
  24.  
  25. // 、实例化VueRouter
  26.  
  27. const router = new VueRouter({
  28. routes // (缩写)相当于 routes: routes
  29. })
  30.  
  31. // 、挂载
  32.  
  33. new Vue({
  34. el: '#app',
  35. router
  36. render: h => h(App)
  37. })
  38.  
  39. // 、根组件的模板里面放上这句话 <router-view></router-view>
  40.  
  41. //、路由跳转
  42. <router-link to="/foo">Go to Foo</router-link>
  43. <router-link to="/bar">Go to Bar</router-link>

Vue 路由及路由默认跳转的更多相关文章

  1. Vue中的路由 以及默认路由跳转

    https://router.vuejs.org/ vue路由配置: 1.安装 npm install vue-router --save / cnpm install vue-router --sa ...

  2. 每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、默认路由、二级路由、路由守卫)

    路由别名   在main.js中的路由中添加name来创建别名 const routes = [ {path:'/footer',name:footerLink,component:Footer} ] ...

  3. Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  4. vue中的路由的跳转的参数

    vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...

  5. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

  6. vue.js关于路由的跳转

    1.路由demo示例 <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 route ...

  7. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  8. Vue编程式路由跳转传递参数

    Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...

  9. 「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题

    前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目 ...

随机推荐

  1. analyse web.xml of hello1

    web.xml注释分析: 补充: 一.XML文档的xmlns.xmlns:xsi和xsi:schemaLocation (参考博客:https://www.cnblogs.com/osttwz/p/6 ...

  2. keepalived高可用集群。

    keepalived故障切换转移原理1vrrp协议:(vritual router redundancy protocol)虚拟路由冗余协议,2故障转移.keepalived三大功能1实现物理高可用, ...

  3. List集合2-LinkedList

    一.LinkedList集合 LinkedList集合也是List接口的实现类(没有ArrayList集合常见) 二.LinkedList集合的特点 LinkedList内部是一个链表(双向链表) L ...

  4. java数学函数Math类中常用的方法

    Math类提供了常用的一些数学函数,如:三角函数.对数.指数等.一个数学公式如果想用代码表示,则可以将其拆分然后套用Math类下的方法即可. Math.abs(12.3);               ...

  5. kafka consumer重复消费问题

    在做分布式编译的时候,每一个worker都有一个consumer,适用的kafka+zookeep的配置都是默认的配置,在消息比较少的情况下,每一个consumer都能均匀得到互不相同的消息,但是当消 ...

  6. ubuntu 部署 wiki.js

    1. 安装node  (还是官网的东西靠谱,虽然是english)  https://github.com/nodesource/distributions/blob/master/README.md ...

  7. 链接属性external的使用

    //demo1.c #include<stdio.h> ; //static int x = 10; void print(void) //static void print(void) ...

  8. 结构体的数据对齐 #pragma浅谈

    之前若是有人拿个结构体或者联合体问我这个结构占用了多少字节的内存,我一定觉得这个人有点low, 直到某某公司的一个实习招聘模拟题的出现,让我不得不重新审视这个问题, 该问题大致如下: typedef ...

  9. java 中Math 的常用方法

    public class Demo{ public static void main(String args[]){ /** *Math.sqrt()//计算平方根 *Math.cbrt()//计算立 ...

  10. java web(七): mybatis的动态sql和mybatis generator自动生成pojo类和映射文件

    前言: MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或其它类似框架的经验,你就能体会到根据 不同条件拼接 SQL 语句的痛苦.例如拼接时要确保不能忘记添加必要的空格,还 ...