vue 路由基础

主要内容

1.动态路由匹配

2.嵌套路由

3.命名路由

4.命名视图

5.重定向

6.别名

7.编程式导航

在router 中显示为

```
const HospitalAdmin = () =>
  import( /* webpackChunkName: "HospitalAdmin" */ '@/views/HospitalAdmin')
{
    path:'/about',
    component: HospitalAdmin,
}
```
这样写的原因是起到懒加载的作用。当使用这个模块的时候，才会加载

```
// which is lazy-loaded when the route is visited 
// this generates a separate chunk (HospitalAdmin.[hash].js） for this route



//import()的作用,起到懒加载的作用。

// /* webpackChunkName: "HospitalAdmin" */:在打包的时候起到标注的作用，打包的时候以（HospitalAdmin.[hash].js）的形式去打包


```
### 动态路由匹配

```
const Detail =() =>
  import( /* webpackChunkName: "Detail" */ '@/views/Detail')
{
    path:'/detail/:id',
    compotent:Detail
}
```
### 嵌套路由

```
const Parent=() =>
  import( /* webpackChunkName: "Parent" */ '@/views/Parent')
  
  const Children=() =>
  import( /* webpackChunkName: "Children" */ '@/views/Children')
{
    path:'/parent',
    component:Parent,
    children:[{
        path:'children',
        component:Children
    }]
}
```

### 命名路由

```
{
    path:'/parent',
    component:Parent,
    name:'parent',
    children:[{
        path:'children',
        name:'children',
        component:Children
    }]
}
<router-link :to="{name:'parent'}">parent</router-link>
```
### 命名视图

```
<router-view/>
<router-view name="item2"></router-view>
<router-view name="item3"></router-view>

router.js

{
    path:'/box',
    components:{
        default:()=>import ('@/views/demo1.vue'),
        item2:()=>import('@/views/demo2.vue'),
        item3:()=>import('@/views/demo3.vue')
    },
    name:'box',

}


```
### 重定向


```
{
    path:'/main',
    redirect:to=>{
        return {
            name:'home'
        }
    }
}

{
    path:'/main',
    redirect:to=>{
        return '/'
    }
}

{
    path:'/main',
    redirect:to=>'/'
   
}
```
### 别名

```
const Home=() =>
  import( /* webpackChunkName: "Home" */ '@/views/Home')
{
    path:'/',
    alias:'home_page',
    component:Home
}
```

### 编程式导航
通过js 来控制跳转
```
demo.vue
methods:{
    handleFun(){
    //回退方法
        this.$router.go(-1)
        this.$router.back()
        
    // 跳转指定页面 
    
    this.$router.push({
        name:'home',
        query:{
            name:'张三',
            age:'12'
        }
    })
    }
    //or
    this.$router.push('/home')
    
    this.$router.replace({
        name:'parent'
    })
}

```
push 方法，在浏览器的历史记录中有记录，但是replace 方法，在浏览历史中，没有记录。


#### 编程式导航加参数 3种写法

```
   this.$router.push({
        name:'home',
        query:{
            name:'张三',
            age:'12'
        }
    })
    }
    //
    this.$router.push({
        name:'home',
        params:{
            name:'张三',
            age:'12'
        }
    })
    }
    //
    let name='张三'
    this.$router.push({
        path:`/home/${name}`
    })
    
    
    
    :8080/home?name='张三'&age='12'
    :8080/home/张三/12
    :8080/home/张三
```
复制代码