Vue CLI配置Vue Router

ゝ一世哀愁。 2023-03-13 05:55 22阅读 0赞

## 一、安装Vue Router ##

安装命令：

npm install vue-router

安装后在根目录中的package.json中的dependencies会声明vue-router的依赖包

## 二、手动创建Router配置文件 ##

1.在src下创建router文件夹  
2.在router文件夹下创建router.js文件  
3.在router.js文件中进行配置

import Vue from 'vue'
    import Router from 'vue-router'
    import Tow from '../components/Tow.vue'
    import HelloWorld from '../components/HelloWorld.vue'
    
    Vue.use(Router)
    
    const routes = [
        { 
            //当path: '/'时，此路由为默认路由首页
            path: '/',  
            name: 'HelloWorld',
            component: HelloWorld,
        },
        { 
            path: '/Tow',
            name: 'Tow',
            component: Tow,
        },
    
    
        //配置说明
        //path: string,
        //component?: Component,
        //name?: string, // 命名路由
        //components?: { [name: string]: Component }, // 命名视图组件
        //redirect?: string | Location | Function,
        //props?: boolean | Object | Function,
        //alias?: string | Array<string>,
        //children?: Array<RouteConfig>, // 嵌套路由
        //beforeEnter?: (to: Route, from: Route, next: Function) => void,
        //meta?: any,
        //
        2.6.0+
        //caseSensitive?: boolean, // 匹配规则是否大小写敏感？(默认值：false)
        //pathToRegexpOptions?: Object // 编译正则的选项
    
    ]
    
    export default new Router({ 
        name: 'RouterDefault',
        routes: routes
    })

说明：  
1.需要引入Vue、vue-router、也需要引入vue组件 …/components/Tow.vue  
2.Vue.use(Router)安装路由功能  
3.const routes 定义vue组件路由配置  
4.new Router() 生成Router对象,且将const routes配置

## 三、将Router对象传入vue实例 ##

在main.js中将Router对象传入vue实例

import RouterDefault  from './router/router'
    
    new Vue({ 
      router:RouterDefault,
      render: h => h(App),
    }).$mount('#app')

## 四、添加标签 ##

在App.vue中(也可以是别的vue实例挂载页面)的id="app"下添加router-view

至此简单的配置已经完成

项目运行后,默认路由到\{path: ‘/’,name: ‘HelloWorld’,…\} 这个地址

可以使用下面方式进行路由跳转

<router-link to="/Tow">aaaa</router-link>

this.$router.push({  name: 'Tow'});