Vue:路由router的一些用法

Z时代
2024-01-10
分类：综合

vue

Vue-router的引入

分为两种方式：

1.通过npm 引入vue-router库

npm install vue-router

在模块中通过下面的方法使用

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

2.直接通过script标签引入vue-router.js文件

如果是通过script标签引入，则直接使用即可。

下载地址

router的使用

var routes = [
        {
            path:'/home',
            component:home,
            name:"home"
        },
        {
            path:'/order',
            component:order,
            name:"order",
            redirect:'/order/all',  /*默认子路由*/
            children:[
                {
                    path:'all',
                    component:all,
                    name:'allOrder'
                },
                {
                    path:'having',
                    component:having,
                    name:'havingOrder'
                },
                {
                    path:'had',
                    component:had,
                    name:'hadOrder'
                }
            ]
        },
        {path:'/self',component:_self,name:"self"}
    ]