Vue Router 使用

文档

https://router.vuejs.org/zh/guide/

安装

npm install vue-router

配置到项目

在src中新建router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import demo1 from '../components/demo1'
import demo2 from '../components/demo2'


/*配置路由*/
const routes=[
    {path:"/demo1",component:demo1},
    {path:"/demo2",component:demo2}
    
]
/*实例化路由*/
const router = new VueRouter({
  routes // （简写）相当于 routes: routes
})
/*导出路由模块*/
export default router

main.js中代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'
new Vue({
  el: '#app',
  router,      //挂在路由
  render: h => h(App)
})

根组件App.vue代码如下：

<template>
  <div id="app">
        <router-link to="/demo1">demo1</router-link>
        <router-link to="/demo2">demo2</router-link>
        <router-view></router-view>

  </div>
</template>

<script>
export default {
  name: 'app',
  methods:{

  }

}
</script>

router-link为路由跳转标签，属性to是路由跳转的url，每个url都对应不同的切换组件。
router-view标签为路由插入组件的位置