Router界面切换（一）基础

前言

在vue开发中，使用router来进行导航不同页面之间的切换
原网站

一、配置路由

import Vue from 'vue'
import Router from 'vue-router'
import namePush from '@/components/namePush'
import first from '@/components/first'

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'namePush',
      component: namePush
    },
    {
      path: '/first',
      name: 'first',
      component: first
    },
  ]
})

• path：路由跳转的路径
• name：路由跳转时的名称
• component：路由组件

二、在vue中配置路由

一般在main.js文件中配置

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

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

三、路由组件的渲染

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

路由匹配的组件，将渲染在router-view中；

四、路由跳转

根据router-link来实现路由的跳转

<router-link to="/first">first</router-link>

根据path实现路由跳转
根据name实现路由跳转