Vue学习10-一级路由配置

Vue Router是官方的一款路由,除此之外还有第三方的 Page.js 或者 Director 可以使用。

项目使用官方的VueRouter步骤:

  1. 安装vue router。如果在安装vue cli时没有选上vue-router则要手动安装。cnpm install vue-route
  2. 新建route.js路由规则文件。一般位于根下的routers文件夹内,或者package.json同级下。
  3. 命名路由。在模块化开发中,需要引入包括Vue、Vue-route、其他的组件(单页模版view文件夹)等。接着使用Vue.use(VueRouter)启用路由。同时新建routes对象(包括path、name、component)。最后new 一个VueRouter即可。
  4. ⚠️注意:新建路由对象的mode属性可以影响url规则,当mode: ‘history’时,网址不含hash-tag,如果不指定为history模式或者为’abstract’时,则为hash-tag模式)。因为VueRouter默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。如果不想要 hash模式,可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
  5. 创建路由使用环境。例如导航栏、侧边栏中会创建超链接。比如这个位于<template>标签内的声明式导航,<nav><ul><router-link to=”/film” tag=”li” active-class=”my-active-class”>film</router-link></ul></nav> 使用<router-link>标签,to指向目的url。
  6. 引入路由。在App.vue中,import引入创建的路由使用环境(例如导航栏组件),在<template>中使用<router-view>标签引入路由匹配到的组件。router-view默认名为default。
  7. ⚠️注意:如果在一个页面非嵌套的同级展示多级视图,就要使用命名视图,即需要给<router-view>添加name或者class。<router-view class="view two" name="a"></router-view>
  8. 启用路由。在main.js中,引入Vue、App、router(也引入store)。new创建vue实例,参数配置中包含router。

在import引入中,@符号代表 src路径。即与App.vue和main.js同级。

Vue.use(VueRouter)

const routes = [
  {
    path: '/cinema',
    name: 'Cinema',
    component: Cinema
  }
]

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

export default router
新建路由实例,不指定模式,或者是hash模式时。打开的url带/#/xxx

新建路由实例时,指定为history模式,url为常规模式