Vue-router前端渲染

1.使用vue-router进行导航

import vueRouter from 'vue-router'
import router from './router/index.js' //路由定义文件
Vue.use(vueRouter)
//实例对象中挂载路由
var template=`<App></App>`
var app=new Vue({
  el:"#app",
  data:{'a':1},
  render:h=>h(App),
  router:router, //mount router
})

2.放置填充的模板

• App组件中设置填充内容

<template>
<router-view></router-view>
</template>
<script>
  export default{

  }
</script>
<style>
</style>

3.路由设置

import vueRouter from "vue-router"
import indexPage from "./../components/index.vue"

const router=new vueRouter({
  routes:[
    {path:'/',component:indexPage}
  ]
})
export default router

参考

1. vue-router https://router.vuejs.org/zh/guide/#html