Vue前端路由

前端路由

1.路由：对应关系

后端路由：根据不同的用户url请求，返回不同的内容

本质：url请求地址与服务器资源之间的对应关系

后端渲染

1. 存在性能问题，频繁刷新

2. ajax前端渲染，提高性能，但是不支持浏览器的前进后退操作

3. SPA：single page application单页面应用程序

   整个网站只有一个页面，内容的变化通过ajax局部更新实现，同时支持前进和后退操作

4. SPA实现原理之一：基于url地址的hash（hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的url请求）

5. SPA核心技术：前端路由

前端路由：根据不同的用户事件，显示不同的页面内容

本质：用户事件与事件处理函数之间的对应关系

2.实现简易的前端路由

// 监听window的onhashchange事件，根据获取到的最新的hash值，切换显示的组件的名称
window.onhashchange = function(){
    // 通过location.hash获取到最新的hash值
	switch(location.hash.slice(1)){
           ....
    }    
}

3.Vue Router

• 功能
  • 支持html5历史模式或hash模式
  • 支持嵌套路由
  • 支持路由参数
  • 支持编程式路由
  • 支持命名路由

①基本使用

1.引入相关库文件

先引入vue再引入vue-router 。

2.添加路由链接

router-link：vue提供的标签，默认会被渲染为a标签

to默认会被渲染为href属性

to的值默认会被渲染成#开头的hash地址

<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

3.添加路由填充位（路由占位符）

将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置

<router-view></router-view>

4.定义路由组件

const User = {
    template:'<h1>User组件</h1>'
}
const Register = {
    template:'<h1>Register组件</h1>'
}

5.配置路由规则并创建路由实例

每个路由规则都是一个配置对象，其中至少包含path和component两个属性

path：当前路由规则匹配的hash地址

component：当前路由规则对应要展示的组件

// 创建路由实例对象
const router = new VueRouter({
    // 所有的路由规则数组
    routes:[
        {path:'/user',component:User},
        {path:'/register',component:Register}
    ]
})

6.把路由挂载到vue根实例中

new Vue({
    el:'#app',
    // 挂载路由实例对象 es6中两个相同可以简写
    // router:router
    router
});

②路由重定向

用户在访问A地址时，强制用户跳转到地址C，从而展示特定的组件页面。

redirect属性指定一个新的路由地址。

const router = new VueRouter({
    // 所有的路由规则
    routes:[
        {path:'/',redirect:'/user'},
        {path:'/user',component:User},
        {path:'/register',component:Register}
    ]
})

③嵌套路由

1. 创建父级路由链接+父级路由填充位

2. 创建子级路由链接+子级路由填充位

const User = {
    template:'<h1>User组件</h1>'
}
const Register = {
    template:`
        <div>
            <h1>Register组件</h1>
            <hr>
            // 子路由链接
            <router-link to='/register/tab1'>tab1</router-link>
            <router-link to='/register/tab2'>tab2</router-link>

            // 子路由填充位
            <router-view></router-view>
        </div>
	`
}

3. 子级的子组件

const Tab1 = {
    template:'<h1>Tab1组件</h1>'
}
const Tab2 = {
    template:'<h1>Tab2组件</h1>'
}

4. 父级路由通过children属性配置子级路由规则

const router = new VueRouter({
    // 所有的路由规则
    routes:[
        {path:'/',redirect:'/user'},
        {path:'/user',component:User},
        // children数组表示子路由规则
        {path:'/register',component:Register,children:[
            {path:'/register/tab1',component:Tab1},
            {path:'/register/tab2',component:Tab2}
        ]}
    ]
})

④动态路由匹配

应用场景：通过动态路由参数的模式进行路由匹配

1. 动态路由参数 以:开头，共用一个组件

const router = new VueRouter({
    // 所有的路由规则
    routes:[
        {path:'/user/:id',component:User},
        {path:'/register',component:Register}
    ]
})

2. 路由组件中通过$router.params获取路由参数

const User = {
    template:'<h1>{{$router.params.id}}组件</h1>'
}
const Register = {
    template:'<h1>Register组件</h1>'
}

⑤路由传参

$router与对应路由形成高度耦合，不够灵活，所有使用props将组件和路由解耦。

1. props的值为布尔型

   路由规则

const router = new VueRouter({
 routes:[
     // 设置props属性为true，route.params会被设置为组件属性
     {path:'/user/:id',component:User,props:true}
 ]
})

路由组件

const User = {
    // 使用props接收路由参数
    props:['id'],
    // 使用路由参数
    template:'<h1>{{id}}组件</h1>'
}

2. props的值为对象类型

   路由规则

const router = new VueRouter({
 routes:[
     // 设置props属性为对象
     {path:'/user/:id',component:User,props:{uname:'lisi',age:20}}
 ]
})

路由组件，id访问不到了

const User = {
    // 使用props接收路由参数
    props:['uname','age'],
    // 使用路由参数
    template:'<h1>{{unanme}}----{{age}}组件</h1>'
}

3. props的值为函数类型

   路由规则

const router = new VueRouter({
 routes:[
     // 设置props属性为对象
     {path:'/user/:id',
      component:User,
      props:route=>({uname:'lisi',age:20,id:route.params.id})}
 ]
})

路由组件，可以访问id

const User = {
    // 使用props接收路由参数
    props:['id','uname','age'],
    // 使用路由参数
    template:'<h1>{{unanme}}----{{age}}组件</h1>'
}

⑥命名路由

给路由规则起一个别名。

路由规则

const router = new VueRouter({
 // 所有的路由规则
 routes:[
     {path:'/user/:id',component:User,name:'user'},
     {path:'/register',component:Register}
 ]
})

路由链接:绑定to，参数name表示命名路由，参数params传递参数，id和规则中的相同

<router-link :to="{name:'user',params:{id:3}}">Register</router-link>

⑦编程式导航

页面导航的两种方式：

声明式导航：通过点击链接实现导航，如<a>和<router-link>

编程式导航：通过调用javascript形式的API实现导航，如location.href

• 基本用法

  • this.$router.push('hash地址')

  • push的参数规则

    • 字符串（路径名称）

      router.push('/home')

    • 对象

      router.push({path:'/home'})

    • 命名路由（传递参数）

      router.push({name:'/user',params:{userId:123}})

    • 带查询参数，变成/home/?uname=lisi

      router.push({path:'/home',query:{uname:'lisi;}})

const User = {
    // 使用props接收路由参数
    props:['id','uname','age'],
    // 使用路由参数
    template:`
        <div>
            <h1>{{unanme}}----{{age}}组件</h1>
            <button @click='goRegister'>跳转</button>
        </div>
	`,
    methods:{
        goRegister(){
            // 编程式跳转
            this.$router.push('/register')
        }
    }
}

• this.$router.go(n) 前进1 后退-1

const Register = {
        template:`
        <div>
            <h1>Register组件</h1>
            <button @click='goBack'>后退</button>
        </div>
	`,
    methods:{
        goBack(){
            this.$router.go(-1)
        }
    }
}