路由入口与vue布局入口

1、vue 模式设置
Vue.config.productionTip = false

阻止启动生产消息，常用作指令

注解：

开发模式：npm run dev是前端自己开发用的
生产模式：npm run build 打包之后给后端放在服务端上用的

上面这行代码的意思是阻止显示生产模式的消息。
如果没有这行代码，或者设置为true，控制台就会多出这么一段代码。

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.

大概意思就是：
你运行的Vu是开发模式。为生产部署时，请确保启用生产模式。
https://blog.csdn.net/boysky0015/article/details/102534229

2、vue插件
插件的使用很简单，使用Vue.use注册后即可全局使用

2.1 引入iview插件

import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);

https://www.cnblogs.com/hermit-gyqy/p/10950174.html

2.2 引入vue-router插件
vue-router是Vue.js的路由插件。

使用场景（优劣）原理

   适合用于构建单页面应用，基于路由和组件；路由用于设定访问路径，将路径和组件映射起来。

路径之间的切换实际上就是组件的切换。

安装： npm install vue-router --save

使用vue-router插件：

import Router from 'vue-router';
//注册路由Vue.use(Router);
//实例化路由const router = new Router({routes: baseRoutes,mode: 'history'
});
Vue.config.productionTip = false;
Vue.use(iView);
Vue.use(myPlugin);/* eslint-disable no-new */
new Vue({el: '#app',router,store,components: {App},template: '<App/>'
});

2.3 vue-router插件详解
简介
vue-router是基于路由和组件的
路由用于设定访问路径, 将路径和组件映射起来.
在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.

代码解析：

//配置路由
import VueRouter from 'vue-router'
import Vue from 'vue'//安装插件（插件都要安装的）
Vue.use(VueRouter)
//创建路由对象
const router = new VueRouter({routes
})
const routes = [
//这里就是配置url和页面之间的映射关系
]//最后将对象传到vue实例中，就把它挂载到vue实例里
export default router

https://blog.csdn.net/qq_39773416/article/details/101805366

标签解释
mode: ‘history’ //设置模式（保存历史，不然路径就会出现‘#’）
routes: baseRoutes, //设置路由数组
path: ‘/’, //显示路径
name: ‘root’, //显示名称
component: Layout, //
resolve => require([’…/pages/home.vue’], resolve)

这种写法是异步模块获取，打包的时候每次访问这个路由的时候会单调单个文件，

按需加载。还有种写法就是用import，这种是把component打包到一个文件里面，初次就读取全部

https://segmentfault.com/q/1010000017913060/a-1020000017915112

redirect: ‘/home’, //重定向
children: //子路由
2.4 注册组件
注册全局组件
注册一个全局组件语法格式如下：

Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>
创建根实例
new Vue({el: '#app'})注册局部组件new Vue({el: '#app',components: {// <runoob> 将只在父模板可用'runoob': Child
}
})

3、export default {} 和new Vue()区别
1.export default 的用法：相当于提供一个接口给外界，让其他文件通过 import 来引入使用。

而对于export default 和export的区别:
在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等，

你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，

将其导入，以便能够对其进行使用，但在一个文件或模块中，export、import可以有多个，export default仅有一个。

如果不使用export default ，使用如下指令也可以。
let是当前作用域下声明变量
var是全局，外层可以调用

对于 new Vue({})部分，只是创建一个Vue的实例就是相当于创建一个根组件

https://www.cnblogs.com/nx520zj/p/9617689.html

4、vue布局的入口

<Layout></Layout>

注：一个layout代表着一个一个整体页面，对于RA来说只有一个页面。

子路由只是切换页面中的某一部分。

路由入口与vue布局入口相关推荐

路由原理及vue实现动态路由
路由原理在前端开发中,路由通常用于实现 SPA 应用程序,即在一个页面中切换不同的内容或页面,而不需要重新加载整个页面.路由的实现原理是通过监听 URL 的变化,然后根据不同的 URL 加载不同的内 ...
vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
Vue中路由管理器Vue Router使用介绍（三）
2019独角兽企业重金招聘Python工程师标准>>> 一.路由定义添加动态参数定义 1.路由定义项,使用:xx 方式定义动态参数 {path:'/user/:id/:name', ...
全国计算机英语四六级准考证打印准考证号,大学英语四六级准考证打印入口|四六级准考证打印入口2020...
全国大学英语四.六级考试马上就开始啦,准备考四六级的你还不知道大学英语四六级准考证打印入口|四六级准考证打印入口2020.中公教师网小编把大学英语四六级准考证打印入口|四六级准考证打印入口20 ...
卫生资格计算机成绩单打印,中国卫生人才网2020年卫生专业技术资格成绩查询入口及成绩单打印入口【已开通】...
[导语]无忧考网从中国卫生人才网获悉,2020年卫生专业技术资格成绩查询入口及成绩单打印入口已开通,11月19日起可查分,成绩通知单打印开放起始时间为12月10日,具体详情如下: 成绩查询及成绩单打印 ...
全国计算机四六级官网,英语四级报名入口|英语六级报名入口官网-全国大学英语四六级考试网...
相关推荐: 英语四级报名入口|英语六级报名入口官网已经发布,2020下半年全国大学英语四六级报名时间从9月23日开始,英语四级报名入口|英语六级报名入口官网为全国大学英语四.六级考试网(网址:http ...
vue修改入口文件名字_webpack打包vue项目，可修改配置文件
问题: vue项目打包完成后,如需改变配置文件中的信息,比如域名修改(如下图config.js),是不可能在配置文件中直接更改的,因为配置文件是前端写死的,这时只能手动更改项目中的配置,然后重新打包n ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
Vue教程6【完结】【vue-router】路由，路由传参，编程式路由导航，缓存路由组件，路由守卫，路由模式，vue ui组件库
vue-router 了解 vue插件库,用来实现SPA应用(单页面) 整个页面只有一个完整的页面点击页面中导航链接,不会刷新页面,只做局部更新数据通过ajax请求路由的理解一组映射关系(ke ...
路由守卫 AJAX,vue路由导航守卫和请求拦截以及基于node的token认证
#####什么时候需要登录验证与权限控制 1.业务系统通常需要登录才能访问受限资源,在用户未登录情况下访问受限资源需要重定向到登录页面: 2.多个业务系统之间要实现单点登录,即在一个系统或应用已登录的 ...

路由入口与vue布局入口

路由入口与vue布局入口相关推荐

最新文章

热门文章