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,目 ...
随机推荐
- Linux .vimrc 设置项
Linux 下,.vimrc 有两个.一个是全局使用的(/etc/vimrc),另一个是个人使用的(~/.vimrc). 大部分的情况下,我们只需要设置自己目录下的.vimrc 即可. # vim ~ ...
- DMSkin for WPF 开源在Github
DMSkin for WPF 开源在Github http://www.dmskin.com/
- K2助力大鹏绿色环保之路
K2和大鹏结缘可以追溯到2006年,两家践行绿色环保理念的公司一拍即合,开始了十余年的合作之路,在“绿色环保”的路上留下了坚实的脚印. 绿色能源:LNG 广东大鹏液化天然气有限公司成立于2004年 ...
- tensorFlow(二)线性回归
需要TensorFlow基础,见TensorFlow(一) 原理默认了解不赘述 实例: 模型创建: #!/usr/bin/python # -*- coding: utf-8 -* import te ...
- icon moon追加字体
一.初始自定义字体为icon moon1@font-face { font-family: 'icomoon1'; src: url('fonts/icomoon1.eot?9fhn24'); src ...
- Convert Binary Search Tree to Doubly Linked List
Convert a binary search tree to doubly linked list with in-order traversal. Example Given a binary s ...
- 第一章01:熟悉java,发展历史
1. java由来: 原公司,sun,后来被oracle\甲骨文公司收购 java,主要用于开发互联网软件,例如:QQ.迅雷.淘宝.京东
- linux 基础测试题
1. 什么是buffer和cache buffer (cpu→内存→磁盘,简称为写缓冲 ):当你网上观看视频且网络波动较大的时候,会发现弹出一个正在缓冲中,这个就是buffer. cache(磁盘→内 ...
- 学号 20175223 《Java程序设计》第1周学习总结
学号 20175223 <Java程序设计>第1周学习总结 教材学习内容总结 第一章要点: 要点1:Java的三大平台:Java SE,Java EE,Java ME. 要点2:Java的 ...
- guava-retrying 源码解析(停止策略详解)
一.停止策略相关类 1.停止策略接口:StopStrategy接口,只有一个抽象方法 // 是否应该停止重试.不同的停止策略有不同的实现.boolean shouldStop(Attempt fail ...