【Vue】路由

文章目录

  • 一、路由的概念
    • 1.后端路由
    • 2.前端路由
    • 3.单页面应有程序
  • 二、路由的实例化
    • 1.路由实例化步骤
    • 2.声明式的路由跳转
    • 3.函数式路由跳转传参
    • 4.路由的重定向 redirect
    • 5.路由高亮
    • 6.组件的嵌套
    • 7.命名视图 components: { }
    • 8.代码


一、路由的概念

1.后端路由

对于普通的网站,所有超链接都是URL地址,所有URL地址都对应服务器上对应的资源


2.前端路由

对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换


3.单页面应有程序

在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由)


二、路由的实例化

1.路由实例化步骤

1.引入js文件
2.创建路由new VueRouter(),接受的参数是一个对象
const router = new VueRouter({})
3.创建映射关系
routes : [{
path : URL地址,
component : 组件
}]
4.将路由实例挂载到Vue实例上
5.预留展示区域


2.声明式的路由跳转

router-link 标签可以设置to属性:

传参:

path – query
name – params 必须传参,更安全


3.函数式路由跳转传参

你可能感兴趣的:(vue.js,javascript,前端)