Vue路由创建及使用

使用路由前先需要安装vue-router：

        命令为：npm install veu-router --save

1.路由创建：

需要提供的配置文件：在项目的src目录下创建router.js文件，也可以直接添加进App.vue。如果选择配置router.js文件，需要将其导入App.vue内。

在使用前需要导入vue-router并进行使用。

import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

导入完成后，需要创建实例，具名或匿名导出。下方是匿名导出路由，导入其他页面组件，进行路由配置。路由内component是配置页面其他子组件的内容  

component: () => import('./views/About.vue')    起到了懒加载的作用 。

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    },{
      path: '/carousel',
      name: 'carousel',
      component: Carousel
    }
  ]
})

配置路由的部分部分完成。

2.路由使用

实现的文件为App.vue文件，其添加导航的位置在<div id="app"></div>下，可使用router-link实现路由。router-view 实现路由内容的地方，引入组件时写到需要引入的地方。需要注意的是，使用vue-router控制路由则必须router-view作为容器。

<dvi id="app"></div>
    <div id="nav">
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link> |
        <router-link to="/carousel">Carousel</router-link>
    </div>
    <router-view/>
</div>

同时，在添加完成后需要在根节点上进行挂载。

new Vue({
  // router 路由必须加在挂载点上
  router,
  render: h => h(App)
}).$mount('#app')

引入需要路由的组件，添加路由操作完成。

在router-link这里添加时，可以选用多种方式。

<!-- 路径方式 -->
<!-- 静态导航 -->
<router-link to="/">Home</router-link>

<!-- 命名路由的方法，此方法必须给路由命名 -->
<router-link :to="{ path: 'about' }">About</router-link>
或者
<router-link v-bind:to="{ path: 'about' }">About</router-link>

<router-link :to="about">About</router-link>

<!-- 命名的路由 -->
<router-link :to="{ path: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

在组件内添加  tag 标签，可以指定导航展示的标签：

<router-link :to="apple" tag="li"></rpouter-link>

最终这个导航菜单展示的为li标签。

路由内子路由的添加：

{
      path: '/about',
      name: 'about',
      component: About,
      // 这个添加的是子路由，可/red进行查看页面内的东西
      children:[
         {
           path:' red',
           component: RedApple
         }
       ]
    }

过渡属性

有过渡属性时，需要进行加载，可以添加transition标签进行切换，及keep-alive标签进行缓存，避免在每次加载的时候都需要重新加载视图。

<transition name=”fade”>
  <keep-alive>
     <router-view></router-view>
  </keep-alive>
</transition>

具名视图

视图 router-view也可以添加名称,在componnets内根据不同视图展示不同的组件。

<router-view name="comA"/>
<router-view name="comB"/>

路由重定向

使用redirect将指定 主页的内容 “/” 重定向到“/home” 内。

   {
      // 路由的重定向
      path:'/',
      redirect: '/home'
    },

编程式导航

通过js添加导航，与router-link实现效果一致：

router.push({path:'apple',params:{name:"test"}})