vue-router简单使用

1.安装vue-router

npm i vue-router -s

2.编写路由文件

建立router文件夹，文件夹下创建路由文件router.js,并编写如下内容

import Vue from 'vue';
import Router from 'vue-router';
//自定义的组件
import User from '../components/User';

Vue.use(Router);

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

3.使用路由文件

一般是在入口文件引入路由然后使用，主要分3步.

<template>
  <div id="app">
    <Dialog/>
    // 3.根据不同的路由显示不同的组件
    <router-view></router-view>
  </div>
</template>

<script>

//1. 引入路由文件
import router from './router/router'

import Dialog from './components/Dialog'

import './styles/app.css'
import './styles/animations.css'
export default {
  name: 'App',
  
  // 2.挂载路由文件（我理解的是挂在）
  router,
  
  components: {
    Dialog
  }
}
</script>

4.执行前三步就已经能做到路由

如果要动态更改的话可以使用router-link标签或使用路由的方法
详情见官网