Vue-router 路由使用-CSDN博客

安装路由 npm install vue-router

创建router.js(用于配置路由组件及对应地址等)

import Vue from 'vue' 
import Router from 'vue-router'   //引入vue及路由
Vue.use(Router)   //使用路由

//组件模块
import HelloWorld from './components/HelloWorld'
import Footer from './components/Footer'
import Header from './components/Header'
// 导入组件进行路由配置

export default new Router({
    mode:'history',    //配置模式为history模式，对应还有hash模式(#)
    routes: [
        { path: '/', name: 'home', component: HelloWorld },  
        { path: '/header', name: 'Header', component: Header },
        { path: '/footer', name: 'Footer', component: Footer }
    ]
     //path:对应路由路径  component:对应路由组件
})
复制代码

在main.js中

import router from './router'  //引用router
new Vue({
  render: h => h(App),
  router,                //new Vue实例内使用router
}).$mount('#app')
复制代码

在App.vue中，完成对应路由设置

<template>
  <div id="app">
    <router-link to='/home'><button>home</button></router-link><br>   
    <router-link to='/header'>test</router-link><br>
    <router-link to='/footer'>test</router-link>
        //router-link将渲染为a标记,to将渲染为href属性，对应to的值为路由配置中的path值
    <router-view></router-view>        //router-view指定路由出口
  </div>
</template>
复制代码