二十四、进阶之一级路由配置

单个页面也可能有多个路径，路由进行路径之间关系的管理

（1）vue-router的下载（创建项目时，已经下载）

（2）router的环境配置（已有router/index.js配置文件，只需进行修改）

（2.1）创建相关的组件(在router/index.js中使用)

 注意：页面级的组件、当前页面唯一使用的组件放在views文件夹下；

           共享的组件放在components文件夹下

因此在views下创建（2）中的三个组件（页面级组件）

（2.2）引入上述的3个组件，并进行配置

（2.3）在根main.js中引入当前的路由模块（router/index.js）

（2.4）在App.vue文件中，为路由组件的显示留位置（router-view）

类似于插槽的作用

（3）运行结果

不会出现链接的跳转

1.  刷新locaohost:8080页面

2.  http://localhost:8080/#/film

3.  http://localhost:8080/#/center

4.  http://localhost:8080/#/cinema

（4）Vue文件中引用路径的三种方式

（5）源代码

（5.1）router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router' //引入下载的路由
//引入三个组件
import Film from '@/views/Film' //.js可以省略
import Cinema from '@/views/Cinema'
import Center from '@/views/Center'

Vue.use(VueRouter)//使用注册路由插件

const route = new VueRouter({
  routes:[ //定义多个路由routes
    {
      path:"/film", //如果路径是film，则加载的是Film组件
      component:Film
    },
    {
      path:"/cinema", //如果路径是cinema，则加载的是Cinema组件
      component:Cinema
    },
    {
      path:"/center",
      component:Center
    }
  ]
})
export default route //导出路由

（5.2）main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router' //引入路由模块
// import store from './store'

Vue.config.productionTip = false

new Vue({ 
  //如果router:router名字一样，则可以省略:router。写为router
  router, 
  // store,
  render: h => h(App) //自己创建App组件，render将App渲染到页面
}).$mount('#app')//app对应html文件中的id