创建路由步骤:

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路由的步骤的更多相关文章

  1. vue2.0路由变化1

    路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...

  2. vue1与vue2的路由 以及vue2项目大概了解

    vue1的路由 1.设置根组件  Vue.extend() 2.设置局部组件  Vue.extend({template:"/home"}) 3.实例化路由   var route ...

  3. vue2.0路由

    现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...

  4. vue2.0路由写法、传参和嵌套

    前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...

  5. nodejs添加路由route步骤详解

    首先,毋庸置疑, 新建一个基础express站点.建好之后, 有三个文件需要code(当然,三个步骤顺序随意). 下面以添加一个'/about'为例说明. 1. 在views文件夹里,新建一个jade ...

  6. vue2.0路由进阶

    一.路由的模式 第一种用history方式实现,HTML5使用window.history.pushState()实现路由的切换而不刷新页面. 第二种使用hash值的方式来实现. vue2.0两种都可 ...

  7. vue2.0路由-路由嵌套

    vue一个重要的方面就是路由,下面是自己写的一个路由的例子: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> ...

  8. vue2.0 路由传参(router-link传过去)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. vue2.0 路由知识一(路由的创建的全过程)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Petrozavodsk Winter Camp, Warsaw U, 2014, A The Carpet

    一个地图上有若干障碍,问允许出现一个障碍的最大子矩形为多大? 最大子矩形改编 #include<bits/stdc++.h> using namespace std; #define re ...

  2. 第八届蓝桥杯 4、方格分割 DFS

    标题:方格分割 6x6的方格,沿着格子的边线剪开成两部分. 要求这两部分的形状完全相同. 如图:p1.png, p2.png, p3.png 就是可行的分割法. 试计算: 包括这3种分法在内,一共有多 ...

  3. js里面对数据处理的方法

      1,charAt()方法可返回指定位置的字符 JavaScript String 对象 例:stringObject.charAt(index) index:表示字符串中某个位置的数字,即字符在字 ...

  4. javascript设计模式阅读后的感悟与总结

    单例模式 用于创建唯一的一个对象. 核心在于一个判断 var index if(index){ return index; } init(); 这样只会在第一次的时候初始化创建对象,以后都不会再创建对 ...

  5. kafka producer batch 发送消息

    1. 使用 KafkaProducer 发送消息,是按 batch 发送的,producer 首先把消息放入 ProducerBatch 中: org.apache.kafka.clients.pro ...

  6. fetch跨域浏览器请求头待研究

    fetch('https://wwww.baidu.com', {headers: { "Access-Control-Allow-Origin": "*", ...

  7. MVP之高级MVP架构封装

    MVP之高级MVP架构封装 No MVP: 我们一般会这样写: public class MainActivity extends AppCompatActivity { private EditTe ...

  8. 浮点型数据转整型的丢失精度问题(C++)

    如下代码:http://ideone.com/xcgHgw #include <iostream> using namespace std; int main() { // your co ...

  9. unity中使用www的库读取数据里面的数据

    //使用www的库,读取数据里面的数据 string factoryControllerUrl = "http://IP地址:8086/DatabaseServerCode/GangShan ...

  10. python修炼第六天

    越来越难了....现在啥也不想说了,撸起袖子干. 1 面向对象 先来个例子: 比如人狗大战需要有狗,人所以创建两个类别模子def Person(name,sex,hp,dps): dic = {&qu ...