vue-router 路由跳转

1、为什么要路由

1. 用于组件与组件之间的跳转
2. 页面跳转
3. 参数传值

2、路由配置

main.vue

content.vue

myvue.vue

router目录下的index.js，用于加载路由配置

// vue-router配置
import Vue from 'vue'
import VueRouter from 'vue-router' // 从node_modules 中导入安装好的vue-router

// 导入自定义组件
import Content from '../components/content'
import Main from '../components/main'

import myvue from "../components/myvue";

// 安装路由
Vue.use(VueRouter)

// 配置路由导出
export default new VueRouter({
    
    
    routes: [
      {
    
    
        // 指定路由路径
        path: '/content',
        name: 'content',
        // 跳转的组件
        component: Content,
        children: [ // 路由嵌套
          {
    
    
            path: '/myvue',
            component: myvue
          }
        ]
      }, {
    
    
        path: '/main',
        name: 'main',
        component: Main
      }
    ]
})

3、使用路由

在app.Vue 里面展示路由链接和视图

<!-- 主模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>

    <!-- 跳转链接 -->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">content page</router-link>

    <!-- 展示视图 -->
    <router-view></router-view>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
    
    
  name: 'App',
  components: {
    
    
    HelloWorld
  }
}
</script>

<style>
</style>

main.js程序入口导入router

// 导包
import Vue from 'vue'
import App from './App'

import router from './router' // 自动扫描router里面的路由配置 index.js

new Vue({
    
    
  el: '#app',
  router, // 指定路由
  components: {
    
     App },
  template: '<App/>'
})