Vue Vue-route （2）

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue-route重定向和声明式导航

目录

Vue-route路由

重定向

首页默认访问

不存在匹配

声明式导航

路由原理

使用示例

自定义class类

Tag设置

版本4路由

改变

示例

总结

---

Vue-route路由

重定向

首页默认访问

希望访问网站域名时，直接访问film组件。

在router/index.js中配置根路径默认组件.

示例如下：

// 配置表
const routes = [
  {
    path: '/filems',
    name: 'filems',
    component: Films
  },
  {
    path: '/cinemas',
    name: 'cinemas',
    component: Cinemas
  },
  {
    path: '/center',
    name: 'center',
    component: Center
  },
  {
    path: '/',
    name: 'films',
    component: Films
  }
]

不存在匹配

当输入不存在的路径时，匹配所有路径。

示例如下：

{
    path: '/',
    name: 'films',
    component: Films
  },
  {
    path: '*',
    component: Films
  }

按照从上到下的顺序进行匹配。

声明式导航

监听路由改变，来实现导航高亮。

路由原理

1.hash路由 location.hash 切换

window.onhashchange 监听路径的切换

2.history路由  hostory.pushState 切换

window.onpopstate 监听路径的切换

使用示例

使用router-link替换原来的a标签来实现跳转；

并给跳转后的路径设置样式。

点击后，当前路由上自动加上类。

示例如下：

效果：

自定义class类

可以在router-link上自定义class类，在渲染后也可以应用上。

示例如下：

Tag设置

Tag设置渲染元素，不设置默认渲染为a标签。

示例如下：

版本4路由

改变

4之后这个语法就不好用了，需要修改为：

 

示例

把原来的导航改为版本4的导航。

示例如下：

    

        
          
电影
        
        
          
影院
        
        
          
我的
        
    

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue-route重定向和声明式导航