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

通俗来说，路由就是锚点<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所示。结果如下：