Vue 路由及路由默认跳转
路由就是让根组件动态得去挂载其他组件;
步骤:
//路由配置: //.安装 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 路由及路由默认跳转的更多相关文章
- Vue中的路由 以及默认路由跳转
https://router.vuejs.org/ vue路由配置: 1.安装 npm install vue-router --save / cnpm install vue-router --sa ...
- 每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、默认路由、二级路由、路由守卫)
路由别名 在main.js中的路由中添加name来创建别名 const routes = [ {path:'/footer',name:footerLink,component:Footer} ] ...
- Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转
今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...
- vue中的路由的跳转的参数
vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...
- 解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...
- vue.js关于路由的跳转
1.路由demo示例 <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 route ...
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- Vue编程式路由跳转传递参数
Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...
- 「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题
前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目 ...
随机推荐
- C# 远程传输File文件
/// <summary> /// 向论坛传图片文件 /// </summary> /// <param name="filePath">< ...
- bootstrap validator 出现Maximum call stack size exceeded
如果用 c# 里面用的是 taghelper 的控件,有可能造成 Maximum call stack size exceeded bootstrap validator 必须是继承 bootst ...
- CSS3 2D转换 动画
transform:translate(x,y): 过度 鼠标悬浮 在2s内完成所有变化 div { width:100px; height:100px; background:red; trans ...
- Ajax实战(原生)
/** 之前一直在学习ajax,也拿jQuery写了很多,感觉还是写原生的对基础的理论理解的深刻.特此书写. * 得到ajax对象 */ function getajaxHttp() { var xm ...
- 解决VS2010使用mscomm控件无法接收数据的问题【转】
之前有用过VC6的mscomm控件.所以这次也想继续用此控件实现此功能,结果没想到刚一上手还真的绕了不少弯子.主要是因为VC2010下对mscomm控件的添加,以及对控件成员变量的添加有点小繁琐,特此 ...
- Java学习笔记40(sql:将数据库内数据存入对象中)
新建一个数据表: use qy97; create table student( id int primary key auto_increment, sname ), gander ), age i ...
- JAVA高级篇(四、JVM垃圾回收和调优)
本文转自https://zhuanlan.zhihu.com/p/25539690 JVM GC(垃圾回收机制) 在学习Java GC 之前,我们需要记住一个单词:stop-the-world .它会 ...
- ubuntu16.04下 sublime text输入中文
1.git clone https://github.com/lyfeyaj/sublime-text-imfix.git 2.cd sublime-text-imfix && ./s ...
- LCA - Tarjan 算法
void dfs(int u) { ; i <= n; i++) { if(visit[i]&&ask[u][i]) { LCA[u][i] = Find(i); } } vis ...
- hdu 1874 畅通工程续 floyed
裸题 题意:求任意两点之间的最短路径 坑点:测试数据同一条路径有可能出现多次,然后值不一样,注意筛选最小边 #include <iostream> #include <cstdio& ...