Vue Vue-route （1）_vue import route-优快云博客

Vue 渐进式JavaScript 框架基于Vue2的移动端项目：Vue-route介绍、下载及演示

Vue-route路由

多页面：路径改变后就切换到相应的页面

路径通过映射表对组件进行显示和隐藏

每次路径改变就加载相应组件。

需要使用vue-router，如下：

下载

下载命令

npm install vue-router

或者

npm install --save vue-router

当前目录结构如下：

演示路由

创建页面

做路由需要三个页面（vue），我的电影影院三个组件；

把原来的页面删掉，创建三个页面分别为FilmsView/CinemasView/CenterView。

如下图：

注册路由

在main.js中导入路由，并在实例化Vue时，注册路由。

如果创建项目时就下载了router，默认是注册路由。

示例如下：

import Vue from 'vue'
import App from './App.vue' // 导入根组件
import router from './router' // 导入路由
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

编写路由配置

在router/index.js中编写路由配置，解析路由地址。

示例如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Films from '@/views/FilmsView'
import Cinemas from '@/views/CinemasView'
import Center from '@/views/CenterView'

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

// 配置表
const routes = [
  {
    path: '/filems',
    name: 'filems',
    component: Films
  },
  {
    path: '/cinemas',
    name: 'cinemas',
    component: Cinemas
  },
  {
    path: '/center',
    name: 'center',
    component: Center
  }
]

const router = new VueRouter({
  routes
})

export default router

会直接注册组件，不用手动注册

路由容器

重写App.vue中的内容，增加路由容器。

路由容器routeView，Route-view是插槽的一种变形。

示例如下：

<template>
  <div>
    hello

    <!-- 路由容器 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  }
}
</script>
<style lang="scss" scoped>

</style>

首页功能列表

设置首页页面功能列表

示例如下：

<template>
  <div>
    <ul>
      <li><a href="/#/films">电影</a></li>
      <li><a href="/#/cinemas">影院</a></li>
      <li><a href="/#/center">我的</a></li>
    </ul>

    <!-- 路由容器 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  }
}
</script>
<style lang="scss" scoped>

</style>

访问