vue-router使用简单demo

vue-router使用简单demo

1.首先安装vue-router

npm install vue-router -s

2.创建两个简单视图vue

3.在src目录下配置路由表

import home from "./views/home";
import product from "./views/product";



export const routes = [
  {
    path: "/home",
    component: home
  },
  {
    path: "/product",
    component: product
  }
]

4.在main.js中引入路由模块，引入静态路由表，使用路由模块，创建一个VueRouter模块的实例，把router实例放入到vue实例中

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";//1.引入路由模块
import {routes} from "./routes"//2.引入静态路由表

Vue.use(VueRouter);//3.使用路由模块
//创建一个VueRouter模块的实例
let router = new VueRouter({
  routes: routes
});


new Vue({
  el: '#app',
  router,//5.把router实例放入到vue实例中
  render: h => h(App)
})

在app.vue里面简单测试路由的跳转

<template>
  <div id="app">
    <span>
       <router-link to="/home">首页</router-link>
    </span>
    <span>
       <router-link to="/product">商品列表</router-link>
    </span>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>

</style>