vue router路由插件

vue router路由插件

​
即页面的url路径与html文件一一对应的关系.

说一下工作原理:

监听网页hash值的变化

(1)修改网页的hash值

     hash值原本的作用是来做锚点定位的，它有一个特点就是页面不会跳转

(2)给window注册onhashchange事件，监听hash值变化

    当页面hash变化时，就会执行这个事件处理函数，然后就可以根据不同hash值加载不同页面

单页面应用SPA介绍

即只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序.

简单来讲就是一个html文件对应多个页面

既然有单页面那也就有多页面

多页面则是一个html文件对应一个页面

两者之间的区别:

​

优劣势分析:

优点：

• 整体不刷新页面，用户体验更好
• 数据传递容易, 开发效率高

缺点：

• 开发成本高(需要学习路由)
• 首次加载会比较慢一点。不利于seo搜索引擎优化

总结: 单页面应用, 用户体验好, 开发效率高

再来讲讲路由模式
路由模式分为两种,
在不进行路由mode设置的情况下,默认为hash模式.
还有一种就是history模式.
二者主要的区别:
简单来讲的话就是hash模式的路径中有#哈希符,而history没有,且history上线时需要后端支持.

路由重定向

应用场景:为页面输入根路径/符,页面转跳到首页上去. 需要注意的是重定向只是修改了路径,并没有设置路由规则,所有需要单独设置首页的路由规则.

const routes = [
  {
    path: '/',
    /* 
    (1)重定向只是修改页面路径。  输入 / 会重定向到 /find
    (2)只有component才会让vue去寻找路由匹配页面。所以设置了重定向，还需要单独设置匹配规则
    */
    redirect: "/find"
  },
  {
    path: '/find',
    name: 'find',
    component: find
  },
]

404重定向

默认情况下，当我们输入网址的时候。 vue会从`routes数组中`依次去匹配路径，如果上面的全部无法匹配就会跳转`*`对应的组件页面 *的作用类似于通配符：表示任意路径

const routes = [
  // ...省略了其他配置
  // 404在最后(规则是从前往后逐个比较path)
  {
    path: "*",
    redirect: "/notfound"
  }
]

路由声明式导航

作用:使用router组件进行页面跳转,并传参 **查询参数语法:** 传递参数

<router-link to="/path?参数名=参数值"></router-link>

接收参数

<li>这是当前页面 query 接收到的参数: 
    <span>姓名：{{ $route.query.name }}</span>  --
    <span>年龄：{{ $route.query.age }}</span>  
</li>

路径参数语法:
定义路由规则:

{
    path: '/friend/:name/:age',
    name: 'friend',
    component: friend
}

传递参数:

<router-link to="/friend/参数值">朋友</router-link>

接收参数:

<li>这是当前页面 params 接收到的参数: 
    <span>姓名：{{ $route.params.name }}</span> -- 
    <span>年龄：{{ $route.params.age }}</span>  
</li>

路由编程式导航

作用 ： 使用js代码是做路由跳转 (替代router-link) 语法:

query传参
跳转传参

this.$router.push({ path: '/路由地址', query: { 参数名: '参数值' }})

跳转后的组件接收参数: `this.$route.query.参数名

<li>这是当前页面 query 接收到的参数: 
    <span>姓名：{{ $route.query.name }}</span>  --
    <span>年龄：{{ $route.query.age }}</span>  
</li>

params传参
路由规则添加路由名

{ path: '/friend', name: 'friend', component: friend },

跳转传参

his.$router.push({ name: '路由名', params: { 参数名: '参数值' }})

跳转后的组件接收参数: `this.$route.params.参数名

<li>这是当前页面 params 接收到的参数: 
    <span>姓名：{{ $route.params.name }}</span> -- 
    <span>年龄：{{ $route.params.age }}</span>  
</li>

query参数和params参数区别

1.query: 是通过地址栏传参， 参数会在地址栏显示，刷新还在。 2.params：是通过内存传参，参数不会在地址栏显示，刷新会消失。

二级路由（嵌套路由）

原理:点击导航栏切换页面的时候（PC端导航栏一般在顶部，移动端导航栏一般在底部），如果该页面又需要出现导航栏。这个时候就需要嵌套路由。即该路由又称为二级路由。 语法:

const routes = [
  // ...省略其他
  {
    path: "/find",
    name: "find",
    component: find,
    children: [
      {
        //如果希望进入二级路由默认显示这个页面，只需要路径设置为/即可
        path: "/",
        component: Recommend
      },
      {
        path: "recommend",
        component: Recommend
      },
      {
        path: "ranking",
        component: Ranking
      },
      {
        path: "songlist",
        component: SongList
      }
    ]
  },
  // ...省略其他
]

以上就是vue router 中比较常规的用法了