vue router 中 router-link 不起作用的问题

chunyanquan1444

7010人浏览 · 2018-02-27 15:03:00

chunyanquan1444 · 2018-02-27 15:03:00 发布

今天看了下 vue router 的文档，自己写了个小 demo，代码如下

<html>
<head>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div>
        <router-link to="/home">Home</router-link>
        <router-link to="/about">About</router-link>
        <div id="app">
            <router-view></router-view>
        </div>
    </div>
    <script>
        var Home = Vue.extend({
            template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
            data: function() {
                return {
                    msg: 'Hello, vue router!'
                }
            }
        })
        var About = Vue.extend({
            template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
        })
        const routes = [{
                path: '/home',
                component: Home
            },
            {
                path: '/about',
                component: About
            }
        ]
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            router
        }).$mount('#app')
    </script>
</body>

</html>

通过直接输入地址的方式可以实现页面显示内容的变化，但是点击跳转链接不行，查看页面源码发现 router-link 标签没有被渲染成 a 标签。

经过尝试发现原来是 router-link 标签也需要包裹在 #app 的标签里才行，修改后可正常运行的代码如下

<html>
<head>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/home">Home</router-link>
        <router-link to="/about">About</router-link>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <script>
        var Home = Vue.extend({
            template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
            data: function() {
                return {
                    msg: 'Hello, vue router!'
                }
            }
        })
        var About = Vue.extend({
            template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
        })
        const routes = [{
                path: '/home',
                component: Home
            },
            {
                path: '/about',
                component: About
            }
        ]
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            router
        }).$mount('#app')
    </script>
</body>
</html>

转载于:https://my.oschina.net/u/3188258/blog/1625167

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模