> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/qian-duan-cao-zuo/shi-li-lian-xi/dong-tai-sou-suo-wang-ye/hou-duan/vue-mo-ban/02-lu-you-qian-duan-xuan-ran.md).

# Vue-router前端渲染

## 1.使用vue-router进行导航

```javascript
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组件中设置填充内容

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

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

## 3.路由设置

```javascript
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>&#x20;