Vue路由

最新推荐文章于 2024-10-25 20:02:59 发布

原创最新推荐文章于 2024-10-25 20:02:59 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #node.js

1. 初始化npm项目

npm init -y

执行此命令后生成了package.json文件，此文件类似于spring项目中的pom文件

2. 安装vue、vue-router

npm install vue
npm install vue-router

3. 简单示例代码

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

	// 引入vue和vue-router
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
</head>

<body>

    <div id="app">
    	// 本例中点击"首页"，将由路由去寻找 path 是 /index 的组件，将组件的内容加载到 router-view 标签中
        <router-link to="/index">首页</router-link>
        <router-link to="/product">商品</router-link>
        
        <router-view></router-view>
    </div>

    <script>
		// 创建全局组件
        let indexComponent = Vue.component('index', {
            template: `<div>欢迎来到网上商城</div>`
        })
		// 创建全局组件
        let productComponent = Vue.component('product', {
            template: `<ul>
                        	<li>1.衣服</li>
                        	<li>2.裤子</li>
                        </ul>`
        })

		// 通过路由将 path 和 component 关联起来
        const router = new VueRouter({
            routes: [
                { path: '/index', component: indexComponent },
                { path: '/product', component: productComponent }
            ]
        })
		
		// 创建vue实例
        new Vue({
            router: router
        }).$mount('#app')

    </script>

</body>

</html>