【vue】12.0 vue路由：vue-router

Vue Router官网：https://router.vuejs.org/zh/installation.html

组件的停地切换也能实现页面切换的效果。
但路由的作用可以定位到具体的链接地址，打开指定的页面，而不是每次分享给其他人都是首页面。

因为在项目创建时已经选择导入vue-router包，所以不需要再去引入该js框架。
系统生成的demo如下(/router/router.js)

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

该配置文件，可以精简为如下样式：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [{
    path: '/',
    name: 'Home',
    component: ''
  }]
})

改动router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Film from '@/views/Film.vue'
import Cinema from '@/views/Cinema.vue'
import Center from '@/views/Center.vue'

Vue.use(VueRouter) // 注册路由模块，让插件工作起来

export default new VueRouter({
  routes: [{
    path: '/film',
    component: Film
  }, {
    path: '/cinema',
    component: Cinema
  }, {
    path: '/center',
    component: Center
  }]
})

在views下创建3个vue文件
Center.vue

<template>
  <div>
    <h1>Center</h1>
  </div>
</template>

Cinema.vue

<template>
  <div>
    <h1>Cinema</h1>
  </div>
</template>

Film.vue

<template>
  <div>
    <h1>Film</h1>
  </div>
</template>

运行项目直接输入地址:

http://localhost:8081/#/Cinema

image.png

新建一个组件：
Components/Tabbar.vue

<template>
  <nav>
    <ul>
      <li>
        <a href="/film">电影</a>
      </li>
         <li>
        <a href="/cinema">影院</a>
      </li>
         <li>
        <a href="/center">我的</a>
      </li>
    </ul>
  </nav>
</template>

修改App.vue

<template>
  <div id="app">
    <div id="nav"><tabbar></tabbar></div>
    <router-view />
  </div>
</template>

<script>
import tabbar from '@/components/Tabbar'
export default {
  components: {
    tabbar
  },
  data () {
    return {}
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

这时候发现并没有如我们想象的那样跳转，出现如下的链接地址：

http://localhost:8081/Cinema#/

而且页面无法访问。

这里涉及到路由的原理：
1.hash路由：(#/home)
location.hash切换
window.onhashchange监听路径的切换。
2.history路由(/home)

声明式导航
也就是如下的代码形式：
会被默认渲染成a标签

image.png

可以看到渲染之后逇效果：

image.png

也可以修改成其他标签。
修改componets/Tabbar.vue

<template>
  <nav>
    <ul>
      <router-link to="/film" tag='li'>电影</router-link>
      <router-link to="/cinema" tag='li'>影院</router-link>
      <router-link to="/center" tag='li'>我的</router-link>
    </ul>
  </nav>
</template>

就会变成如下效果和代码源码：

image.png

image.png

也可以设置动态选中时的class属性：
修改componets/Tabbar.vue

<template>
  <nav>
    <ul>
      <router-link to="/film" tag="li" active-class="active">电影</router-link>
      <router-link to="/cinema" tag="li" active-class="active">影院</router-link>
      <router-link to="/center" tag="li" active-class="active">我的</router-link>
    </ul>
  </nav>
</template>

<style lang="scss" scoped>
.active {
  color: red;
}
</style>

image.png

重定向问题

语法如下：

{
pthc:"*",
redirect:"/home"
}

修改路由：

import Vue from 'vue'
import VueRouter from 'vue-router'

import Film from '@/views/Film.vue'
import Cinema from '@/views/Cinema.vue'
import Center from '@/views/Center.vue'

Vue.use(VueRouter) // 注册路由模块，让插件工作起来

export default new VueRouter({
  routes: [{
    path: '/film',
    component: Film
  }, {
    path: '/cinema',
    component: Cinema
  }, {
    path: '/center',
    component: Center
  }, {
    path: '/',
    redirect: '/film'
  }]
})

浏览器输入网址：

http://localhost:8081/

会自动修正链接到：

http://localhost:8081/#/film

嵌套路由

修改路由
src\router\index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Film from '@/views/Film.vue'
import Cinema from '@/views/Cinema.vue'
import Center from '@/views/Center.vue'

import Nowplaying from '@/views/film/Nowplaying'
import Comingsoon from '@/views/film/Comingsoon'
Vue.use(VueRouter) // 注册路由模块，让插件工作起来

export default new VueRouter({
  routes: [{
    path: '/film',
    component: Film,
    children: [{
      path: 'nowplaying',
      component: Nowplaying
    },
    {
      path: 'comingsoon',
      component: Comingsoon
    }
    ]
  }, {
    path: '/cinema',
    component: Cinema
  }, {
    path: '/center',
    component: Center
  }, {
    path: '/',
    redirect: '/film'
  }]
})

新增3个vue文件
src\views\film\Comingsoon.vue

<template>
  <div>
    <h1>Comingsoon</h1>
    <div></div>
  </div>
</template>

src\views\film\Nowplaying.vue

<template>
  <div>
    <h1>Nowplaying</h1>
    <div></div>
  </div>
</template>

src\views\film\FilmNav.vue

<template>
  <div>
    <div>
      <router-link to="/film/nowplaying" tag="li" active-class="active">正在热映</router-link>
      <router-link to="/film/comingsoon" tag="li" active-class="active">即将上映</router-link>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.active {
  color: red;
}
</style>

修改Film.vue
src\views\Film.vue

<template>
  <div>
    <h1>Film组件的轮播</h1>
    <filmnav></filmnav>
    <div>
      <router-view></router-view>
      <!-- 路由容器 -->
    </div>
  </div>
</template>
<script>
import filmnav from '@/views/film/FilmNav'

export default {
  components: {
    filmnav
  }
}
</script>

image.png

动态路由以及传参

修改Nowplaying.vue
src\views\film\Nowplaying.vue

<template>
  <div>
    <h1>Nowplaying</h1>
    <ul>
      <li v-for="item in dataList" :key="item" @click="handleClick">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataList: ['1111', '2222', '3333']
    }
  },
  methods: {
    handleChick () {
      // 跳转路由
      this.$router.push('/detail')
    }
  }
}
</script>

修改路由,增加：

{
    path: '/detail',
    component: Detail
  }

src\router\index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Film from '@/views/Film.vue'
import Cinema from '@/views/Cinema.vue'
import Center from '@/views/Center.vue'

import Nowplaying from '@/views/film/Nowplaying'
import Comingsoon from '@/views/film/Comingsoon'
import Detail from '@/views/Detail'

Vue.use(VueRouter) // 注册路由模块，让插件工作起来

export default new VueRouter({
  routes: [{
    path: '/film',
    component: Film,
    children: [{
      path: 'nowplaying',
      component: Nowplaying
    },
    {
      path: 'comingsoon',
      component: Comingsoon
    }
    ]
  }, {
    path: '/cinema',
    component: Cinema
  }, {
    path: '/center',
    component: Center
  }, {
    path: '/detail',
    component: Detail
  }, {
    path: '/',
    redirect: '/film'
  }]
})

image.png

点击任何一个数组：

image.png

获取动态路由的参数，修改src\views\film\Nowplaying.vue

<template>
  <div>
    <h1>Nowplaying</h1>
    <ul>
      <li v-for="item in dataList" :key="item" @click="handleClick(item)">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataList: ['1111', '2222', '3333']
    }
  },
  methods: {
    handleClick (id) {
      // debugger
      // 跳转路由
      // this.$router.push('/detail')
      this.$router.push(`/detail/${id}`)
    }
  }
}
</script>

就会加载如下链接：

http://localhost:8081/#/detail/1111

取值：
修改路由内容：

{
    path: '/detail/:id',
    component: Detail
  }

这里id只是占位符，可以换成任何单词。
修改src\views\Detail.vue

<template>
  <div>
    <h1>Detail</h1>
  </div>
</template>
<script>
export default {
  mounted () {
    // 获取动态路由的参数
    console.log(this.$route.params.id)
  }
}
</script>

image.png