vueRouter 路由的配置

目录

• vueRouter

vueRouter

路由的配置

1. 引入vue-rotuer.js 文件

<script src='vue.js'></script>
<script src='vue-router.js'></script>

2. 创建路由组件模板
   每个组件必须存在一个唯一的根元素

const 组件名 = {
    template:`组件模板`
}

3. 创建路由配置
   path属性： 匹配的路由； component属性： 匹配到对应路由渲染对应的组件

const routes = [
    {
        path:'/path1',
        component:组件名1
    },{
        path:'/path2',
        component:组件名2
    }
]

4. 创建路由的实例化对象

const router = new VueRouter({
    routes
})

5. 在vue实例中 注册路由

const app = new   Vue({
    ...,
    router
})

6. 在 div#app 中添加一个 <router-view>标签 用来渲染路由组件

<div id='aqpp'>
    <router-view></router-view>
</div>

路由跳转

1. 声明式路由 ： 通过 <router-link>标签的to属性实现 : to绑定的是路由

<router-link to='/path1'>path1</router-link>
<router-link to='/path2'>path2</router-link>

2. 编程式路由（编程式导航）: 通过 this.$router.push('path')

 order(){
    this.$router.push('order')
},
news(){
    this.$router.push('news')
}

命名路由

命名路由 通过 name属性 可以给路由起别名
path属性，name属性，component 属性三者的属性值保持一致

const routes = [
    {
        path:'/path1',
        name:'path1',
        component:组件名1
    },{
        path:'/order',
        name:'Order',
        component:Order
    }
]

动态路由

1. 通过 path/:id 实现动态路由，匹配的路径不同。但是渲染的是同一个模板
2. 获取动态路由的参数：
   • 在模板中： 通过 $route.params.id 获取
   • 在方法中： 通过 this.$route.params.id 获取

const routes = [
    {
        path:'/path1/:id',
        name:'path1',
        component:组件名1
    },{
        path:'/order/2',
        name:'Order',
        component:Order
    }
]

路由传参

1. 通过 query 传递参数 ： query 是一个对象; 传递的参数会拼接在路径上url
   query结合path使用; 如果 path和 params 一起使用，则params 会被自动忽略

   • 在 router-link 中使用

   <!--  -->
   <router-link :to='{
                   path:"/order", 
                   query:{
                       id:100,
                       user:"li"
                   }
   }'>订单</router-link>
   
   

   • 也可以在编程式路由中

   news(){
       this.$router.push({
           path:'/news',
           query:{
               id:2,
               type:'娱乐'
           }
       })
   }
   

2. 通过 params 传递参数 ： params 也是一个对象 ; 传递的参数是不会显示在路径URL 上
   params结合name使用， name是命名路由

   • 在 router-link 中使用

   <router-link :to='{
               name:"Order", 
                   params:{
                       id:100,
                       user:"li"
                   }
   }'>订单</router-link>
   
   

   • 也可以在编程式路由中

   news(){
       this.$router.push({
           name:'News',
           params:{
               id:2,
               type:'娱乐'
           }
       })
   }
   

嵌套路由

嵌套路由（子路由） 通过 children 属性定义 ;

如果父路由是*路由， 则需要在父路由的组件模板中添加 router-view 标签来渲染子路由模板

 const Order = {
    template: `<div>
        我的订单
        <router-view></router-view>
    </div>`
}

子路由 的路径和 父路由的路径会自动拼接： 比如 父路由 path:"/order"， 子路由是 path:‘pay’， 自动拼接为 ‘/order/pay’

const routes = [
    {
        path:'/order',
        component:Order,
        children:[
           {
               path:'pay',
               component:Pay
           }
        ]
    },{
        //  该路由不是 order 的子路由
        path:'/order/list',
        component:List
    }
]