正在回答 回答被采纳积分+1
1回答
好帮手慕糖
2019-07-22 15:54:02
同学你好， router-view 是一个容器，它渲染的组件是你使用 vue-router 指定的。就是把你指定的路由对应的内容，渲染到这个组件中。可以参考如下：
1、首先需要在main.js中，明确安装路由功能
import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter)
2、定义组件
import index from './components/index.vue' import Oindex from './components/Oindex.vue'
3、定义路由
const routes = [
{ path: '/index', component: index },
{ path: '/Oindex', component: Oindex },
]4、创建 router 实例，然后传 routes 配置
const router = new VueRouter({
routes
})5、创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能
const app = new Vue({
router,
render: h => h(App)
}).$mount('#app')6、经过上面的配置之后，路由匹配到的组件将会渲染到App.vue里的<router-view></router-view>
//App.vue <template> <div id="app"> <router-view></router-view> </div> </template>
7、最后会把渲染出来的页面挂载到这个id为app的div里
//index.html
<body> <div id="app"></div> </body>
挂载和渲染的过程是程序自动执行的，了解下过程即可哦。
希望可以帮到你！祝学习愉快！
相似问题
<router-view></router-view>
17
0
3
关于<router-view/>存在的问题
6
0
3
router-view
15
0
1
router-link和router-view
7
0
1
登录后可查看更多问答，登录/注册
4.Vue与React高级框架开发
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星