Vue2.x路由的步骤
创建路由步骤：
1.引入vue-router库，可用最新版https://unpkg.com/vue-router
2.创建所需要的组件
3.创建router实例对象
4.在根实例中注册一下 =》方式：router:router
实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<title>组件化</title>
</head>
<body>
<div id="box">
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
<hr />
<router-view></router-view>
</div> <template id="home">
<div>
<bbb></bbb>
<p>{{msg}}</p>
</div>
</template> <template id="news">
<div>
<bbb></bbb>
<p>{{msg}}</p>
</div>
</template> <template id="bbb">
<div>
<h1>模板</h1>
</div>
</template> <script>
//1.创建组件
var Home=Vue.extend({
template:"#home",
data(){
return { msg:"我是主页模板" };
},
components:{
'bbb':{
template:"#bbb"
}
}
}); var News=Vue.extend({
template:"#news",
data(){
return { msg:"我是新闻模板" };
},
components:{
'bbb':{
template:"#bbb"
}
}
}); //2.创建Router实例对象
var router=new VueRouter(
{
routes:[
{path:"/home",component:Home},
{path:"/news",component:News}
]
}
); //3.创建根实例对象，通过路由配置参数注入路由，让整个应用都有相应的路由地址
var vm=new Vue({
router:router
}).$mount("#box");
</script>
</body>
</html>
Vue2.x路由的步骤的更多相关文章
- vue2.0路由变化1
路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...
- vue1与vue2的路由 以及vue2项目大概了解
vue1的路由 1.设置根组件 Vue.extend() 2.设置局部组件 Vue.extend({template:"/home"}) 3.实例化路由 var route ...
- vue2.0路由
现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...
- vue2.0路由写法、传参和嵌套
前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...
- nodejs添加路由route步骤详解
首先,毋庸置疑, 新建一个基础express站点.建好之后, 有三个文件需要code(当然,三个步骤顺序随意). 下面以添加一个'/about'为例说明. 1. 在views文件夹里,新建一个jade ...
- vue2.0路由进阶
一.路由的模式 第一种用history方式实现,HTML5使用window.history.pushState()实现路由的切换而不刷新页面. 第二种使用hash值的方式来实现. vue2.0两种都可 ...
- vue2.0路由-路由嵌套
vue一个重要的方面就是路由,下面是自己写的一个路由的例子: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> ...
- vue2.0 路由传参（router-link传过去）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue2.0 路由知识一(路由的创建的全过程)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- nmap工具简介
nmap参数介绍: -sL:简单列表扫描 -sn:扫描主机,但是不进行端口扫描 -sS:TCP SYN扫描[半开放扫描,扫描速度高且隐蔽性好] -p |-F:扫描端口列表与扫描次序,常用的扫描方式[- ...
- Debian9服务器安装mysql
第一步 添加mysql软件源 下载mysql的配置文件: cd /tmp wget https://dev.mysql.com/get/mysql-apt-config_0.8.10-1_all ...
- WinForm界面设计-Button添加背景图去边框
转自:https://www.cnblogs.com/tommy-huang/p/4283538.html 1.既然是添加背景图片 所以这里应该使用 Button.BackgroudImage = & ...
- 简述 JVM 垃圾回收算法
经典垃圾回收 标记-清除(Mark-Sweep) 研发园开了家新餐厅,餐厅老板在考虑如何回收餐盘时首先使用了最简单的方式,那就是服务员在顾客用餐的过程中,不定时的观察餐厅,针对用完餐的顾客记录他们的位 ...
- vue2.0项目 calendar.js(日历组件封装)
最近一直闲来无事,便寻思着做一下自己的个人项目,也想说能使用现在比较流行的一些mvvm框架来做,于是就选用了这样的一个技术栈vue2.0+vue-router+vuex+webpack来做,做得也是多 ...
- nginx 实现所有的子域名301跳转到另外一个域名的对应子域名
server { listen ; server_name *.olddomain.com; if ( $http_host ~* "^(.*?)\.olddomain\.com$" ...
- element-ui的那些坑与总结
tags: 默认情况下,下划线是文本宽度 如果要加宽,则可以设置文本(label)的padding, 常规情况下,无法改label宽度,因为他是动态计算的 不过,可以通过自定义,把label拿出来,自 ...
- 获取Promise的值
//response.text()是一个promise对象 //通过then方法获取promise存的数据 response.text().then(val => { errObj = JSON ...
- [Leetcode 72]编辑距离 Edit Distance
[题目] Given two words word1 and word2, find the minimum number of operations required to convert word ...
- 搭建本地yum源
本地yum源其实非常容易搭建 首先进入/etc/yum.repos.d/ 将原来的yum源备份后移除,然后新建dvd.repo: 内容如下: [base] name=base baseurl=file ...