非单文件vue路由

想吃手撕面包

已于 2022-11-16 21:09:35 修改

阅读量317

点赞数 2

文章标签： vue.js 前端

于 2022-08-21 19:00:43 首次发布

本文链接：https://blog.csdn.net/qq_67519713/article/details/126454089

版权

这篇博客展示了如何在非单文件结构中使用Vue.js和Vue Router设置路由。通过创建组件（如`news`、`news1`、`news2`和`renwh`），并定义它们在路由配置中的路径，实现了页面间的导航。`<router-link>`用于定义链接，而`<router-view>`作为组件展示的容器。

摘要由CSDN通过智能技术生成

非单文件vue路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/v2.6.10/vue.js"></script>
    <script src="../js/v2.6.10/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/news">新闻中心</router-link>
        <router-link to="/renwu">人物</router-link>
        <router-view></router-view>
    </div>
    <script>
        var news = {
            template: `
                        <div>
                            <router-link to="/news/news1">新闻主题</router-link>
                            <router-link to="/news/news2">国际新闻</router-link>
                            <router-view />
                        </div>
                    `
        }
        var news1 = {
            template: "<h1>111111</h1>"
        }
        var news2 = {
            template: "<h1>2222222</h1>"
        }
        var renwh = {
            template: "<h1>传说的高富帅</h1>"
        }

        var myRouter = new VueRouter({
            routes: [
                {
                    path: "/news",
                    component: news,
                    children: [{
                        path: "/news/news1",
                        component: news1
                    },
                    {
                        path: "/news/news2",
                        component: news2
                    }
                    ]
                },
                {
                    path: "/renwu",
                    component: renwh
                }
            ]
        })


        new Vue({
            el: "#app",
            data: {

            },
            //计算属性
            computed: {

            },
            router:myRouter
        });
    </script>
</body>

</html>