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

步骤:

 //路由配置:

     //.安装 

     npm install vue-router  --save   / cnpm install vue-router  --save

     //、引入并 Vue.use(VueRouter)   (main.js)

         import VueRouter from 'vue-router'

         Vue.use(VueRouter)

    //、配置路由

         、创建组件 引入组件

         、定义路由  (建议复制)

             const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '*', redirect: '/home' } /*默认跳转路由*/
] // 、实例化VueRouter const router = new VueRouter({
routes // (缩写)相当于 routes: routes
}) // 、挂载 new Vue({
el: '#app',
router,
render: h => h(App)
}) // 、根组件的模板里面放上这句话 <router-view></router-view> //、路由跳转
<router-link to="/foo">Go to Foo</router-link>
<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. C++解析八-多态

    多态多态按字面的意思就是多种形态.当类之间存在层次结构,并且类之间是通过继承关联时,就会用到多态.C++ 多态意味着调用成员函数时,会根据调用函数的对象的类型来执行不同的函数.下面的实例中,基类 Sh ...

  2. python url 下载并保存

    方法一:用urllib import jsonimport urllib url_model='{"version":"2","url":& ...

  3. 深入理解vue-router之keep-alive

    keep-alive 简介 keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染. 用法也很简单: ? 1 2 3 4 5 <keep-alive> ...

  4. scp ssh-key连接原理

    scp ssh-key连接原理   如何关闭位置解析 vim手动打开ssh的配置文件修改81行和122行,位置解析需要双方都关闭      注意重点部分   ssh特别提醒   22端口信息   连接 ...

  5. Eclipse导入war包二次开发

    有实际项目在跑的war包,却没有源码,苦于想查看源码,身处运维组为研发组看不起,拿不到源码,只能自己来反编译了. 其实在解压war包后,可以看到文件夹中,已经存在了jsp文件,但是却没有逻辑代码层(a ...

  6. Kerberos主从配置文档

    Kerberos主从配置文档   1. Kerberos主从同步机制 在Master上通过以下命令同步数据: kdb5_util dump /var/kerberos/krb5kdc/slave_db ...

  7. JavaScript实现本地图片上传前进行裁剪预览

    本项目支持IE8+,测试环境IE8,IE9,IE10,IE11,Chrome,FireFox测试通过 另:本项目并不支持Vue,React等,也不建议,引入JQuery和Vue.React本身提倡的开 ...

  8. cmake使用方法详解

    cmake 简介 CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的makefile或者project文件,能测试编译器所支持的C++特性 ...

  9. 网络编程 生产者消费者模型 GiL

    守护进程: 注意事项: 1.必须在p.start()前 2.守护进程不能开子进程 3.如果主进程的运行时间快于子进程,那么就只有主进程的结果,没有守护进程的结果,因为守护进程没有进行完.反之会得到两个 ...

  10. java实现四则运算应用(基于控制台)

    项目地址:https://gitee.com/wxrqforever/object_oriented_exp1.git 一.需求分析: 一个基于控制台的四则运算系统,要能实现生成并计算含有真,假分数, ...