融资项目——vue之路由实现

发布时间：2023年12月22日

通俗来说，路由就是锚点<a>的升级版。下面举一个例子来了解：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="list">
            <h1>xxx蜜桔介绍</h1>
            <p>
                <router-link to="/info1">原产地介绍</router-link>
                <router-link to="/info2">厂家介绍</router-link>
                <router-link to="/info3">口味介绍</router-link>
            </p>

            <!-- 路由出口 -->
            <router-view></router-view>
		</div>
	</body>
	<script src="axios/axios.min.js"></script>
	<script src="vue/vue.js"></script>
    <script src="vue_router/vue-router.min.js"></script>
	<script>
        // 1、定义组件模板
        const origin={
            template:"<div>原产于菲律宾。</div>"
        }
        const manufacturer={
            template:"<div>生产厂家是西南某水果加工厂。该加工厂是一所XXXX</div>"
        }
        const taste={
            template:"<div>这种橘子味道十分甘甜</div>"
        }
        // 2、定义路由列表
        const routes=[
            {path:"/info1",component:origin},
            {path:"/info2",component:manufacturer},
            {path:"/info1",component:taste},

        ]
        //3、创建路由对象
        const router=new VueRouter({
            routes:routes//确定路由列表，步骤2定义了路由列表

        })
        //4、在Vue对象中配置路由对象。
		new Vue({
			el:"#list",
            router:router
             
		})
	</script>
</html>

首先定义了3个路由："/info1"、"/info2"、"/info3"，将这三个路由动态加载到路由出口中。为了定义这三个路由的内容，我们需要使用vue-router定义路由功能，如上图步骤1 2 3 4所示。结果如下：

另外我们可以创建单独的模板文件进行展示（以后再补充）。

文章来源:https://blog.csdn.net/qq_45007794/article/details/135158151
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章