vue路由初始化路转

最新推荐文章于 2024-01-29 11:57:55 发布

weixin_30708329

最新推荐文章于 2024-01-29 11:57:55 发布

阅读量143

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wntd/p/9023212.html

版权

<!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>

转载于:https://www.cnblogs.com/wntd/p/9023212.html

weixin_30708329

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue路由初始化路转

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalab...
复制链接

扫一扫