路由器1

安装router路由器，但是要指定版本，因为我是用nodejs22安装的vue2。
安装路由器脚本如下：
npm i vue-router@3.2.0

1.首先是导入router和vue的代码。

点击查看代码 
<script src="./node_modules/vue/dist/vue.js"></script>

<script src="./node_modules/vue-router/dist/vue-router.js"></script>

2.编写组件代码：

点击查看代码 
 let Index = Vue.component("index", {
        template: `<div> Hello,欢迎页</div>`
    });
    let Product = Vue.component("product", {
        template: `<ul><li>1.Iphone</li><li>2.xiaomi</li></ul>`
    });

3.弄好路由器

点击查看代码 
const router = new VueRouter({
        routes: [{
            path: "/index",
            component: Index
        }, {
            path: "/product",
            component: Product
        }
        ]
    });
    new Vue({
        el: "#app",
        router
    })
点击查看代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            <router-link to="/index">首页</router-link>
            <router-link to="/product">商品</router-link>
            <router-view></router-view>
        </div>
    </div>
</body>

<script src="./node_modules/vue/dist/vue.js"></script>

<script src="./node_modules/vue-router/dist/vue-router.js"></script>

<script type="text/javascript">
    let Index = Vue.component("index", {
        template: `<div> Hello,欢迎页</div>`
    });
    let Product = Vue.component("product", {
        template: `<ul><li>1.Iphone</li><li>2.xiaomi</li></ul>`
    });

    const router = new VueRouter({
        routes: [{
            path: "/index",
            component: Index
        }, {
            path: "/product",
            component: Product
        }
        ]
    });
    new Vue({
        el: "#app",
        router
    })
</script>

</html>
posted @ 2025-07-16 08:43  孙立人bc  阅读(8)  评论(0)    收藏  举报