Vue Router使用

概述

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换

使用步骤

Demo基于VueCli3.0创建，安装VueRouter组件，以下为路由完整运行流程
1.创建组件
2.创建Router
3.映射路由
4.使用v-link指令
5.使用router-view标签
6.启动路由

├── README.md
├── babel.config.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── router.md
├── src
│   ├── App.vue//4.使用v-link指令 5.使用router-view标签
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   ├── About.vue //1.创建组件
│   │   └── Home.vue //1.创建组件
│   ├── main.js //6.启动路由
│   └── router
│       └── router.js //2.创建Router 3.映射路由
├── tree.md
├── yarn-error.log
└── yarn.lock

router.js文件中进行路由配置

import Vue from 'vue'//加载全局组件时引入vue
import Router from 'vue-router'//引入vue-router
import Home from '../components/Home.vue'//引入相关组件
import About from '../components/About.vue'

Vue.use(Router)//加载全局组件Router

//路由配置
export default new Router({
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        },
        {
            path: '/about',
            name: 'About',
            component: About
        }
    ]
})

App.vue中使用router-link和router-view组件

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div>
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/">Home</router-link>
      <router-link to="/About">About</router-link>
    </div>
    <!-- 路由出口，路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "app",
  components: {}
};
</script>

main.js中挂载路由

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'

Vue.config.productionTip = false

// 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

路由模式

最后编辑于：2019.08.19 14:36:58