Vue Router

目录

1. Vue Router概述

2.路由入门

1.创建路由

2.挂载路由

3.使用路由

3.声明式导航和编程式导航

1.声明式导航

2.编程式导航

---

1.Vue Router概述

一个路由就是一组映射关系,Vue中的路由 : 根据不同的路径,执行不同的组件

2.路由入门

1.创建路由

new VueRouter()

参数,配置对象,对象中有routes属性,值是数组, 保存所有的路由规则

数组中,是每一个路由对象, 对象中有name ,path , component 属性

name : 路由名称

path : 组件对应的路由路径

component : 组件名称

// 创建路由【添加路由规则】
    let vueRouter = new VueRouter({
        routes:[
            {
                name:"register",// 路由名称
                path:"/register",// 组件对应的路由路径
                component:RegisterComponent    // 组件名称
            },
            {
                name:"login",// 路由名称
                path:"/login",// 组件对应的路由路径
                component:LoginComponent    // 组件名称
            }
        ]
    });

2.挂载路由

将创建的路由在Vue实例对象中进行挂载

new Vue({
        el:"#app",
        components:{RegisterComponent,LoginComponent},
        router:VueRouter    // 相当于配置项,属性名必须是 router
    });

3.使用路由

如果使用a 标签 , href 属性中的路径前需要加#号

<router-link  to></router-link>标签 , 解析后,在结构中也是a标签 , to 属性类似a标签中的href,to的属性值是路由路径

 <router-view></router-view> 标签,负责展示组件

<div id="app">

    <!--<a href="#/register">注册</a>
    <a href="#/login">登录</a>-->

    <router-link to="/register">注册</router-link>
    <router-link to="/login">登录</router-link>


    <hr>

<!--    负责展示组件-->
    <router-view></router-view>

</div>

3.声明式导航和编程式导航

1.声明式导航

上述使用的<router-link  to></router-link>标签就是声明式导航

to属性值的多种写法

1. 字符串,如上

2.对象写法

对象中可以写路由name属性,也可以是path

    <router-link :to="{name:'reg'}">注册</router-link>
    <router-link :to="{path:'/register'}">注册</router-link>

2.编程式导航

编程式导航中的参数与声明式导航中 to属性值的写法一样,可以是对象,也可以是字符串

通过$router.push( ) 或者 $router.replace ( ) 

声明式导航router-link 的底层就是通过$router.push( )实现的

 new Vue({
        el: '#app',
        components: {RegisterComponent, LoginComponent},
        router,
        methods:{
            toRegister(){
                // this.$router.push('/register')
                // this.$router.push({name:'reg'})
                this.$router.push({path:'/register'})
            }
        }
    })

注意 : 

1. 编程式导航中是$router

    $route 是当前路由规则对象,$router 是VueRouter 实例对象

2. push与replace的区别

• push : 跳转路由【会在历史记录中添加一个记录，这样后退能回到之前的页面】 
• replace : 替换导航【不会在历史记录中添加一个记录，不能后退回到之前的页面】