通俗来说,路由就是锚点的升级版。下面举一个例子来了解:

xxx蜜桔介绍

原产地介绍厂家介绍口味介绍

// 1、定义组件模板const origin={template:"原产于菲律宾。"}const manufacturer={template:"生产厂家是西南某水果加工厂。该加工厂是一所XXXX"}const taste={template:"这种橘子味道十分甘甜"}// 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 })

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

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