# 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](https://router.vuejs.org/zh/guide/#html)&#x20;
