Vue2.x路由的步骤
2024-10-13 04:02:09
创建路由步骤：
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>
最新文章
- stdlib.h stdio.h
- AngularJS常用指令用法详解
- 关于HTML的Element
- 在C#中使用GDAL创建Shape文件
- CSS 隐藏多余的字符
- HDU 2159 FATE(全然背包+二维费用背包)
- loadrunner11的移动端性能测试之脚本录制
- Mac 下安装node.js
- BZOJ1500 [NOI2005]维修数列-fhq_Treap
- ubuntu中文乱码解决
- linux 图形化界面 && 谷歌浏览器 安装
- 小米手机Toast显示带应用名称问题解决方法
- C# 委托和泛型
- django 静态css js文件配置
- 下厨房6月26日数据丢失事故总结 MYSQL主分区被rm 命令误删除
- struts2 资源国际化
- 元素的定位id和name
- 洛谷 P1762 偶数
- ASP.NET与MVC架构区别总结
- java与java学习路线