vue路由初始化路转
2024-08-26 16:07:09
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script> </head>
<body>
<div id="box">
<router-link to="/index">首页</router-link>
<router-link to="/content">内容</router-link> <router-view></router-view>
</div> <script type="text/javascript"> let index = {
template:'<h1>这是首页</h1>',
}; let content = {
template:'<h1>这是内容页</h1>',
}; let routes = [
{path: '/', redirect: '/index'},//定义的初始路由路径
{path:'/index',component:index},
{path:'/content',component:content},
]; let router = new VueRouter({routes}); var app = new Vue({
el:'#box',
router:router
});
</script>
</body>
</html>
最新文章
- [转] Struts2入门示例教程
- <;2016-1-28>;
- oracle 创建database Link
- 有关微信开发中errorcode:-1 errmsg:system error 错误的一点原因
- JavaScript之继承(原型链)
- [git] git 的基础功能
- Python 3
- laravel5.4+vue+vux+element的环境搭配
- 高可用Redis(九):Redis Sentinel
- IIC时序详解
- Python中print/format字符串格式化实例
- Linux命令之grep
- Lucene系列二:Lucene(Lucene介绍、Lucene架构、Lucene集成)
- OpenACC 书上的范例代码(Jacobi 迭代),part 3
- window.open()用法说明
- 《大型网站SEO优化实践》学习分享
- RobotFramework自动化3-搜索案例
- 第三百一十一节,Django框架,Form表单验证
- 对拍 bat
- PHP中获取当前页面的完整URL &; php $_SERVER中的SERVER_NAME 和HTTP_HOST的区别
热门文章
- Android SurfaceView入门学习
- HeyWeGo第四周项目总结
- stm32 Flash读写独立函数[库函数]
- POJ 3468 A Simple Problem with Integers(线段树:区间更新)
- 利用Html.css OPPO手机导航菜单的制作解析
- Android -- 怎么发出和接收广播, Broadcast, 电话拨号拦截,短信拦截
- Spring ApplicationListener使用方法及二次调用问题解决
- python 十进制数转二进制数
- phpstudy一个域名配置两个网站(一个是thinkphp5,一个是原生php)
- 雷林鹏分享:Ruby CGI方法