vuecli3.0 配置vue-router

布满荆棘的人生 2023-06-15 09:49 168阅读 0赞

## 安装 ##

直接在命令行打开项目目录然后输入以下代码进行安装

npm install vue-router

## 配置路由 ##

1.使用`router-view`标签设置路由显示层(一般会写在App.vue文件)![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21laXMyNzQ2MQ_size_5_color_FFFFFF_t_70]  
2.配置routes（路由路径）  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21laXMyNzQ2MQ_size_16_color_FFFFFF_t_70][]  
`index.js` 控制文件

import Vue from 'vue'	//引入vue
    import VueRouter from 'vue-router'	//引入vue-router模块
    import routes from './routes'	//引入路由配置文件(详见下方routes.js配置)
    Vue.use(VueRouter)	//声明安装路由
    
    export default new VueRouter({routes})	//返回实例

`routes.js` 路由配置文件

//这里就可以引用你要显示的页面了
    import bindTel from '@/components/verification/bindTel.vue'
    import index from '@/components/HelloWorld.vue'
    
    //配置路由，path就是你浏览器地址，component就是跟着你要显示的页面，/表示默认地址。
    export default [
    	{path:"/",component:index},//主页
    	{path:"/bindTel",component:bindTel}//绑定手机号
    ]

## 引用路由 ##

全都配置好之后在main.js下引用router文件，以及渲染到视图。

import router from './router'	//引用router
    
    new Vue({
      render: h => h(App),
      router	//加到这里渲染到视图
    }).$mount('#app')

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21laXMyNzQ2MQ_size_5_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191122092354417.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21laXMyNzQ2MQ==,size_5,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21laXMyNzQ2MQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191122092615966.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21laXMyNzQ2MQ==,size_16,color_FFFFFF,t_70