Vue全家桶-前端路由

Vue全家桶-前端路由

一、路由的基本概念与原理

1.路由:是一个比较广义和抽象的概念,路由的本质就是对应关系。

开发中,分为后端路由和前端路由。

①后端路由:根据不同的用户URL请求,返回不同的内容。

本质:URL请求地址与服务器资源之间的对应关系。

②SPA

后端路由渲染(存在性能问题)。

Ajax前端渲染(前端渲染提高性能,但是不支持浏览器的前进后退操作)。

SPA单页面应用程序:整个网站只有一个页面,内容的变化通过Ajax局部更新实现,同时支持浏览器地址栏的前进的后退操作。

SPA实现原理之一:基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化、hash的变化不会触发新的URL请求)。

在实现SPA过程中,最核心的技术点就是前端路由。

③前端路由:根据不同的用户事件,显示不同的页面内容。

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

④实现简易前端路由

基于URL中的hash实现(点击菜单的时候改变URL的hash,根据hash的变化控制组件的切换)

//监听window的onhashchange事件,根据获取得到的最新hash值,切换要显示的组件的名称

window.onhashchange = function () {

    //通过location.hash 获取到最新的hash值

}

2.Vue Router

Vue Router 是vue.js官方的路由管理器。

它和vue.js的核心深度集成,可以非常方便的用于SPA应用程序的开发。

vue Router 包含功能有:

支持HTML5历史模式或hash模式

支持嵌套路由

支持路由参数

支持编程式路由

支持命名路由

二、vue-router的基本使用

1.基本使用步骤

①引入相关库文件

导入vue文件,为全局window对象vue构造函数

导入vue-router文件,为全局window对象挂载VueRouter构造函数

②添加路由链接

router-link是vue中提供的标签,默认会被渲染为a标签

to属性默认会被渲染成href属性

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

User

Register

③添加路由填充位

路由填充位,也叫路由占位符

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

④定义路由组件

var User = {

    template: '

User
'

}

var Register = {

    template: '

Register
'

}

⑤配置路由规则并创建路由实例

//创建路由实例对象

var Router = new VueRouter({

    //routes是路由规则数组

    routes:[

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

    //  path表示当前路由规则匹配的 hash地址

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

      {path:'/user',component:User},

      {path:'/register',component:Register}

    ]

})

⑥把路由挂载到Vue根实例中

new Vue({

    el: '#app',

    router

});

2.路由重定向

指的是用户在访问地址A的时候,强制用户跳转到地址C,从而展示特定的组件页面,通过路由规则的 redirect属性,指定一个新的路由地址,可以很方便的设置路由的重定向:

var router = new VueRouter({

    routes:[

      //其中path表示需要被重定向的原地址,redirect表示将要被重定向到的新地址

        {path:'/',redirect : '/user'},

        {path:'user',component:User},

        {path:'/register',component:Register}

    ]

})

三、vue-router嵌套路由

1.嵌套路由用法

①嵌套路由功能分析

点击父级路由链接显示模板内容

模板内容中又有子级路由链接

点击子级路由链接显示子集模板内容

②父路由组件模板

父级路由链接

父组件路由填充位

    User

    Register

    控制组件的显示位置

   

③子级路由模板

子级路由链接

子集路由填充位

const Register = {

    template : `

       

Register 组件

       


        Tab1

          Tab2

        子路由填充位置

       

   

`

}

④嵌套路由配置

父级路由通过children属性配置子集路由

const router = new VueRouter({

    routes:[

      {path:'/user',component:User},

      {

        path:'/register',

        component: Register,

        //通过children属性,为/register添加子路由规则

        children : [

          {path:'/register/tab1',component:Tab1},

          {path:'/register/tab2',component:Tab2}

        ]

      }

    ]

})

四、vue-router动态路由匹配

1.动态匹配路由的基本用法

思考:

有如下三个路由链接

User1

User2

User3

//定义如下三个对应的路由规则,是否可行?

  {path:'/user1',component:User}

  {path:'/user2',component:User}

  {path:'/user3',component:User}

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

var router = new VueRouter({

    routes: [

      //动态路径参数,以冒号开头

      {path : '/user/:id', component:User}

    ]

})

const User = {

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

    template : '

User  {{ $router.params.id}}

}

2.路由组件传递参数

$routet与对应路由形成高度耦合,不够灵活,所以可以使用props将组件和路由解耦。

①props的值是布尔类型

const router = new VueRouter({

    routes : [

      //如果props被设置为true,routet.params将会设置为组件属性

        {path:'/user/:id', component : User, props:true}

    ]

})

const User = {

    props:['id'],//使用props接收路由参数

    template : '

用户ID:  {{ id }}
' //使用路由参数

}

②props的值为对象类型

const router = new VueRouter({

    routes : [

      //如果props是一个对象,它会被按原样设置为组件属性

        {path:'/user/:id', component : User, props:{ uname:'li',age:20}}

    ]

})

const User = {

    props:['uname','age:],

    template : `

用户信息:  {{ uname +'---'+ age }}
`

}

③props的值为函数类型

const router = new VueRouter({

    routes : [

      //如果props是一个函数,则这个函数接收router对象为自己的形参

        {path:'/user/:id',

          component : User,

          props: router => ({ uname:'zs', age: 20, id : router.params.id})}

    ]

})

const User = {

    props:['uname' 'age','id'],

    template : `

用户信息:  {{ uname +'---'+ age + '---' + id}}
`

}

五、vue-router命名路由

1.命名路由的配置规则

为了更加方便的表示路由的路径,可以给路由规则起一个别名,即为'命名路由'。

const router = new VueRouter({

    routes : [

        {path:'/user/:id',

          name: :'user'

          component : User

        }

    ]

})

User

routet.push({ name:'user', params : { id :123}})

六、vue-router编程式导航

1.页面导航的两种方式

声明式导航:通过点击链接实现导航的方式。

例如:普通网页中的a链接,或者vue中的router-link标签

编程式导航:通过调用JavaScript形式的Api实现导航的方式

例如:普通网页中的location.href

编程式导航基本用法:

常用的编程式导航API如下

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

this.$router.go(n)

const User ={

    template : '

    methods : {

        goRegister : function () {

          //用编程的方式控制路由跳转

          this.$router.push('/register');

        }

    }

}

2.编程式导航参数规则

router.push()方法的参数规则

//字符串(路径名称)

router.push('/home')

//对象

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

//命名的路由(传递参数)

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

//带查询参数,变成/register?uname=lisi

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

七、基于vue-routet的案例

后台管理路由案例

用到的路由技术要点:

路由的基本用法,

嵌套路由,

路由重定向,

路由传参,

编程式导航

你可能感兴趣的:(Vue全家桶-前端路由)