vue-router 的使用
vue-router 是 vue 的 一个特色。
下面介绍vue-router 的使用:
一、先将vue-router作为vue 的一个插件使用
import Vue from 'vue'
import VueRouter from 'vue-router'
import home from '@/components/Home'
import about from '@/components/About' //作为vue的插件使用
Vue.use(Router) const routes = new VueRouter({
routes: [
{
path: '/home',
name: 'Home',
component: home
},
{
path: '/about',
name: 'About',
component: about
}
{
path: '*',
redirect: '/home'
}
] })
vue-router 的使用的更多相关文章
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- vue router 只需要这么几步
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- Vue Router学习笔记
前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...
- vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题
转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- vue router 跳转到新的窗口方法
在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...
随机推荐
- js 自定义获得类class和获得id
使用js获取类名,但是低版本浏览器不支持getElementsByClassName,所以我们就需要自定义getClassName,方便跨浏览器使用. 当然,如果采用jquery就不需要. //获取类 ...
- anaconda安装出现failed to create anacoda menue
1.卸载Anaconda后重新安装Anaconda出现各种问题,粗暴解决方式:直接将安装目录放在C盘主路径下,完美解决. 2.然后无选择忽略,忽略,忽略,提示安装成功,依旧没有 菜单 进入 cmd,找 ...
- MongoDB mongo.exe启动及闪退解决 转载
转载自:http://blog.csdn.net/wyx_wx/article/details/76108662 启动: 进入MongoDB安装目录下的bin目录,启动mongod.exe 出现如图所 ...
- 「框架」菜鸟简单模仿一下spring的ioc和aop思想,欢迎大家进来阅读指教
*博客搬家:初版发布于 2015/12/04 16:41 原博客地址:https://my.oschina.net/sunqinwen/blog/539397 spring最核心的部分莫过于io ...
- 2018牛客多校6 - I Team Rocket KD树维护空间
题意:给出n条铁路区间\([L,R]\),共有m个boom依时间顺序放置在\(k_i\)中,区间与\(k_i\)有交集的都被炸掉 求每次炸掉的铁路个数和最后输出所有id被炸的时间点 炸弹能炸到的区间满 ...
- WinForm GDI编程:Graphics画布类
命名空间: using System.Drawing;//提供对GDI+基本图形功能的访问 using System.Drawing.Drawing2D;//提供高级的二维和矢量图像功能 using ...
- 解决js array的key不为数字时获取长度的问题
最近写js时碰到了当数组key不为数字时,获取数组的长度为0 的情况. 1.问题场景 var arr = new Array(); arr[‘s1‘] = 1001; console.log(arr. ...
- java多线程-线程间协作
大纲: wait.notify.notifyAll Condition 生产消费者 一.wait.notify.notifyAll wait.notify.notifyAll是Object的本地fin ...
- (转)如何使用Journalctl查看并操作Systemd日志
原文:https://blog.csdn.net/zstack_org/article/details/56274966 内容简介 作为最具吸引力的优势,systemd拥有强大的处理与系统日志记录功能 ...
- MongoDB实战开发
[目标]:本文将以实战的形式,向您展示如何用C#访问MongoDB,完成常见的数据库操作任务, 同时,也将介绍MongoDB的客户端(命令行工作模式)以及一些基础的命令. [说明]:MongoDB是什 ...