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

步骤:

 //路由配置:

     //.安装 

     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. Servlet过滤器实现访客人数统计

    第一. Servlet的创建和配置  1. 创建一个Servlet需要实现javax.servlet.Filter接口,同时实现Filter的3个方法.             第一个方法时过滤器中的 ...

  2. 使用Stickers拓展集成iMessage简单功能

    添加一个target,选择Stickers拓展: 然后就会出现iMessage的文件夹:添加你需要的iMessage图片,这里图片遵循下面的要求: Small: 100 x 100 pt @3x sc ...

  3. FS:[0] 链条

    0x01  用户态 在x86系统中,当线程在用户态执行时,段寄存器fs总是指向当前线程的TEB. 在Ntdll中有一个未公开的函数NtCurrentTeb() ,用来取得当前线程的TEB地址.FS:[ ...

  4. 读入一个字符串str,输出字符串str中连续最长的数字串

    要求: 读入一个长度不超过256的字符串,例如“abc123defg123456789hjfs123456”.要求输出“123456789” 思路: 遍历字符串,如果是数字串则计算往后一共有多少个数字 ...

  5. 安装numpy&pandas

    https://www.scipy.org/scipylib/download.html 上述网站下载对应自己电脑版本的numpy.我的电脑是win32位,py是3.6的. 然后运行cmd,再按照如下 ...

  6. 重构 改善既有代码的设计 Replace Method with Method Object(以函数对象取代函数)

    你有一个大型函数,其中对局部变量的使用使你无法采用Extract Method. 将这个函数放进一个单独对象中,如此一来局部变量就成了对象内的字段.然后你可以在同一个对象中将这个大型函数分解为多个小型 ...

  7. Kafka0.8.2删除topic逻辑(转)

    原文链接:Kafka0.8.2.1删除topic逻辑 前提条件: 在启动broker时候开启删除topic的开关,即在server.properties中添加:  delete.topic.enabl ...

  8. python自学第7天,函数,参数

    函数:逻辑结构化和过程化的一种编程方法 面向对象--->类 class 面向过程--->过程 def 函数编程--->函数def import time def logger(): ...

  9. html 刷新重载方法汇总

    一.javascript页面刷新重载的方法: <a href="javascript:location.reload();">点击重新载入页面</a> &l ...

  10. iOS开发 SVN回退到某一个版本

    1.选择你要恢复的工程,(注意:从SVN上checkout下来的工程不要改变,移动位置) 2.找到SVN的导航栏,点击“Working Copy”--->"Revert" 3 ...