【VUE】2.渲染组件&重定向路由

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.删除多余组件，使环境赶紧

1. 整理App.vue, 删除多余内容，在template 模板区域增加一个路由占位符

router-view：渲染路径匹配到的视图组件

<template>
<div id="app">

<router-view></router-view>
</div>
</template><script>export default {
name: 'app'
}
</script>

2.删除components下的所有组件

3.删除views文件夹

4.整理路由规则：router -> index.js

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)
// 路由规则
const routes = []const router = new VueRouter({
routes
})export default router

5.npm run serve 启动正常

2.渲染新的组件

1. components -> 新增Demo1.vue, 一个组件包括3个部分：1.结构，2.行为，3.样式，样式scoped 表示当前样式只在当前组件中生效

<template>
<div>this is demo1</div>
</template><script>
export default {}
</script><style lang="less" scoped></style>

2. 到路由中添加路由规则 router -> index.js

1. 导入组件

2.添加路由规则：路由路径，名字，组件：path；访问路由，component:组件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Demo1 from '../components/Demo1.vue'Vue.use(VueRouter)
// 路由规则
const routes = [
{
path: '/demo1',
name: 'Demo1',
component: Demo1
}
]const router = new VueRouter({
routes
})export default router

3.访问：http://localhost:8080/#/demo1

3. 路由重定向

1. 在router -> index.js 中新增一个路由规则，访'/’的时候跳转‘/demo1’：redirect:重定向

const routes = [
{
path: '/',
redirect: '/demo1'
},
{
path: '/demo1',
name: 'Demo1',
component: Demo1
}
]

【VUE】2.渲染组件&重定向路由的更多相关文章

Vue中的组件及路由使用
1.组件是什么组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声 ...
vue中的组件，Component元素，自定义路由，异步数据获取
组件是Vue最强大的功能之一.组件是一组可被复用的具有一定功能,独立的完整的代码片段,这个代码片段可以渲染一个完整视图结构组件开发如何注册组件?第一步,在页面HTML标签中使用这个组件名称,像使用DO ...
Vue框架（三）——Vue项目搭建和项目目录介绍、组件、路由
Vue项目环境搭建 1) 安装node,在官网下载好,然后在本地安装官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm ins ...
Vue&period;js 第4章组件与路由
组件什么是组件:组件就是一些标签结构的封装,同时为这些结构添加需要的业务逻辑,设置你想要的样式一个组件中一般可以设置:结构,功能和样式为什么要使用组件: 使用方便复用组件的创建和使用组件的 ...
router-view组件在app&period;vue中渲染不出来怎么办
1.在app.vue使用router-view组件直接渲染页面什么都没显示,可能问题出在路由配置上了,检查路由是否配置完好,路由挂载那里必须使用routes属性 2.在app.vue中router- ...
Javascript - Vue - webpack中的组件、路由和动画
引入vue.js 1.cnpm i vue -S 2.在mian.js中引入vue文件 import Vue from "vue"//在main.js中使用这种方式引用vue文件时 ...
Vue小项目二手书商城：（一）准备工作、组件和路由
本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...
vue（组件、路由）懒加载
const Login = resolve => require(['@/components/Login'], resolve) //就不用import了 Vue.use(Router) le ...
Vue Router：使用 props 将组件和路由解耦
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 可以使用 props 将组件和路由解耦. 一路由配置(布尔模式): impo ...

随机推荐

【原】通过JS打开IE新tab（非Window）的解决方案
近日项目里遇到限定在IE的tab窗口里打开新窗口的需求,结合网上的资源和亲自实践,总结以下比较可行的解决方案. 1.首先必须保证IE的设置正确.打开IE的Internet options ->G ...
svn快速教程
本文拷贝自网址:http://www.subversion.org.cn/?action-viewnews-itemid-1 如何快速建立Subversion服务器,并且在项目中使用起来,这是大家最关 ...
Windows环境下Oracle数据库的自动备份脚本
批处理文件(.bat) @echo off echo ================================================ echo Windows环境下Oracle数据 ...
Struts2配置拦截器,struts2加载常量时的搜索顺序
1:struts2加载常量时的搜索顺序 1.Struts-default.xml 2.Struts-plugin.xml 3.Struts.xml 4.Struts-properties(自己创建的) ...
SQL中CONVERT()转化函数的用法字符串转日期
SELECT CONVERT(varchar(), GETDATE(), ): :57AM SELECT CONVERT(varchar(), GETDATE(), ): // SELECT CONV ...
VMware系统运维（四）SQL Server 2008 R2 新建数据库与ODBC数据
1.新建数据库,右击"新建数据库-." 2.设置数据库名,初始数据库大小,如果要配置数据库优化,可以考虑初始大小与日志大小,点击添加安装完成,即完成数据库新建. 3.ODBC数据源 ...
C&num;面向对象——成员变量及封装
namespace 面向对象5_22 { class Animal { private string _Type; public string Type { get { return _Type; } ...
遍历std&colon;&colon;list过程中删除元素后继续遍历过程
std::list::erase Erase elements Removes from the list container either a single element (position) o ...
c++ 隐藏
子类中写了一个与从父类中继承下来的方法名同名的方法子类对象.方法(); //调用子类中定义的方法父类对象.方法(); / ...
为什么很多IT公司不喜欢进过培训机构的人呢？
转载原文链接:https://www.cnblogs.com/alex3714/p/9105765.html 这几天在知乎看到一个问题“为什么很多IT公司不喜欢进过培训机构的人呢?” 身为老男孩的教学 ...