vue-----路由(router)的全局配置
vue中的路由一般是指页面跳转的路径,我们需要做的事,将组件(components)映射到路由(routes),然后告诉Vue Router在哪里渲染它们。VueRouter:构造函数,通过它实例化路由模块对象routes:添加路由配置1router:注入路由router-view:路由所映射组件的展示区域router-link:路由超链接$route:获取路由参数,它是一个对象$router:实
·
vue
中的路由一般是指页面跳转的路径,我们需要做的事,将组件(components)
映射到路由(routes)
,然后告诉Vue Router
在哪里渲染它们。
VueRouter
:构造函数,通过它实例化路由模块对象routes
:添加路由配置1router
:注入路由router-view
:路由所映射组件的展示区域router-link
:路由超链接$route
:获取路由参数,它是一个对象$router
:实现路由跳转,以代码的方式来实现
一、安装
NPM安装:
npm install vue-router
二、创建路由模块
在src中创建
router
文件夹,文件名为index.js
//当前项目的路由模块
//如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能
import Vue from 'vue'
//安装好后就会有vue-router
import VueRouter from 'vue-router'
//在当前项目中安装路由
Vue.use(VueRouter)
// 1.创建路由对象
const router = new VueRouter({
// 2.添加路由配置,通过routes来添加路由配置
routes: [
//3.添加具体的路由配置:配置的本质就是将路由映射到组件
//一般来说,我们可以设置为如下几个选项:name path component redirect children
// name:路由名称
//path:路由路径
//component:路由所映射的组件对象
{
name: 'index',
path: '/index',
// 异步引入组件,确保匹配了路由才加载组件,否则不利于优化
component: () => import('@/views/index.vue')
}
]
})
// 4.暴露
export default router
三、注入路由
在
main.js
中注入路由
//引入路由模块
import router from '@/router/index.js'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
四、映射
在根组件
APP.vue
全局映射
.<template>
<div id="app">
<!-- 路由映射的组件将在这里渲染 -->
<router-view></router-view>
</div>
</template>
五、效果
常见错误
1.route config “component” for path: /index cannot be a string id. Use an actual component instead.
路由配置中的component没有设置为一个组件实例对象
2.Missing required prop: “to”
router-link必须有to属性
3.代码没有错误,但是看不到效果
a.没有注入
b.没有添加router-view
更多推荐
已为社区贡献10条内容
所有评论(0)