Vue-router(路由)

 

一、前端路由两种跳转

1、URL的hash

表面上看, hash路径上带#号, history路径没有带#号

URL的hash也就是锚点(#), 本质上是改变window.location的href属性

hash的跳转不会涉及到服务器,是一个纯前端的跳转( hash的跳转 服务器是不知道的, 服务器可以不用有这个接口, 因为#号开始浏览器就不解析了)

 

 

 

2、HTML5的history模式

history接口时HTML5新增的，它有5种模式改变URL而不刷新页面

history的跳转, 浏览器是会向服务器发起一个该路径的请求, 服务器是需要有这样的接口的,否则就会返回404

路由跳转新页面 push

history.pushState(data, title, url)

 

 

当前页面历史记录替换为 replaceState

history.replaceState(data, title, url)

 

 

history.go(-1) 返回上一页

history.back() 等价于 history.go(-1)

history.forward() 等价于 history.go(1)

hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

history模式提供了对历史记录进行修改的功能，只是当它们执行修改时，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。history模式，会出现404 的情况，需要后台配置。

 

 

二、(重点)Vue-router基本使用

目前前端流行 的三大框架，都有自己的路由实现：

• Angular的ngRouter

• React的ReactRouter

• Vue的vue-router

1、路由使用

在src下的views中，创建 Home.vue 及 User.vue ，随意写入一些信息。找到 router/index.js 中：

import Vue from 'vue'
import VueRouter from 'vue-router'
//定义home页面的作用是一进入服务器需要默认的网页
import Home from '@/views/Home.vue'
​
const User = resolve => { require.ensure(['@/views/User.vue'], () => { resolve(require('@/views/User.vue')) }) };
​
Vue.use(VueRouter)  // 导入路由对象
​
// 定义路由规则
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/user',
    name: 'User',         //下方的注释即为魔法注释
    // component: () => import(/* webpackChunkName: "user" */ '../views/User.vue')
    component: User
  },
    {
    path: '/HomeWork',
    name: 'HomeWork',         //不使用导入组件直接书写地址
    component: () => import('../views/HomeWork.vue'),
    //children子级路由 
    children: [{
        path: 'home',
        name: 'home',
        component: () => import('../views/home.vue'),
      }, {
        path: 'product',
        name: 'product',
        component: () => import('../views/product.vue'),
      }, {
        path: 'mine',
        name: 'mine',
        component: () => import('../views/mine.vue'),
      },
      ]}
]
​
// 创建路由实例
const router = new VueRouter({
  mode: 'history',  // vue路由只有两种模式，一种是hash，一种是history，这里使用历史模式
  base: process.env.BASE_URL,
  routes
})
​
export default router

2、魔法注释

可以看到，我们有两种引入组件的方式。第一种比较能理解，第二种我们称之为“路由懒加载”。而这个懒加载中，有个 webpackChunkName，这东西我们称为魔法注释。

魔法注释的作用：

webpack在打包的时候，对异步引入的库代码（lodash）进行代码分割时，为分割后的代码块取得名字。

Vue中运用import的懒加载语句以及webpack的魔法注释，在项目进行webpack打包的时候，对不同模块进行代码分割，在首屏加载时，用到哪个模块再加载哪个模块，实现懒加载进行页面的优化。

当你 npm run build 之后，生成的js文件中，就能看到以魔法注释定义的js文件名。

 

 

三、路由懒加载

当一个vue项目很大的时候,对于一些“暂时”用不到的组件,我们可以不进行加载,等到用到次组件时再加载。这样可以优化spa应用首次加载白屏情况,也给用户更好的体验。这就是vue路由懒加载。

懒加载的方式

// 方式一: 结合Vue的异步组件和Webpack的代码分析
const User = resolve => { require.ensure(['@/views/User.vue'], () => { resolve(require('@/views/User.vue')) }) };
​
// 方式二: AMD写法
const User = resolve => require(['@/views/User.vue'], resolve);
​
// 方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.
const Home = () => import(/* webpackChunkName: "user" */ '../views/User.vue')

 

 

四、路由跳转

router-link 路由跳转

我们可以使用 router-link 标签来实现跳转，如：

<div id="nav">
  <router-link to="/">Home</router-link> |
  <router-link to="/user">User</router-link>
</div>
<router-view/>

然后通过 router-view 来显示页面。router-link 最终会被渲染为a标签。

router-link 默认会被解析为a标签，如果想让它转换成其他的标签，就需要添加tag属性：

<router-link tag="li" to="/user">User</router-link>

此时，router-link 就被解析为li标签。

 

 

逻辑内编程式导航

我们还有别的方式来进行路径的转化：

// 简写
this.$router.push('/user')
​
// 完整的写法
this.$router.push({path: '/user'})
​
//使用场景类似于  @click = toLogin 
toLogin(){ 
    this.$router.push('/user')
}
​
//子级路由需要写完整父级与子级 
toLogin(){ 
    this.$router.push('/HomeWork/user')
}

我们除了push，还有go、forward、back这几个来触发不同情况的跳转。

 

 

路由命名携带参数

当我们给路由命名后：可以使得url中展示类似于当前页数值等信息

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',    //使用  :  来接收url中的参数
      name: 'User',         // 对路由进行命名
      component: () => import(/* webpackChunkName: "user" */ '../views/User.vue')
    }
  ]
})

携带参数：

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

而在User组件中，可以通过 $route.params.userId 获取到参数：

<div>
  用户页{{$route.params.userId}}
</div>

 

query传参

使用params传参，得到的结果与使用query传参得到的结果有以下区别：

this.$router.push({name: "User", params: {userId: 123}})    // http://localhost:8081/user/123
this.$router.push({name: "User", query: {userId: 123}})       // http://localhost:8081/?userId=123

* 重调强调：

编程式导航中，使用name进行路径跳转，携带参数可以通过params和query，其中query会将参数携带在导航路径上，而使用path进行路径跳转，无法携带params，只能携带query。

补充：

params参数传参写法相当于在路径直接添加：

//App.vue中：
this.$router.push('/user/12');
​
// router/index.js中：
path: '/user/:userId',
    
// User.vue中：
created(){
    console.log(this.$route.params.userId);    // 获取到用户id12
}

 

 

路由重定向

通常用于直接跳转路径到初始一进来的页面,类似于登录后跳转首页功能

const routes = [
  {
    path: '/',            
    redirect: '/home'       // 这就是路由的重定向，重新定义跳转路径
  },
  {
    path: '/home',    // 改成这个之后，原来的/就没有对用的组件了
    component: () => import('@/views/Home.vue')
  },
  
  ...  ...
  {
    path: '*',      // 匹配所有剩余的路由，只要不是上面提及的页面，全部跳转到404页面
    component: () => import('@/views/Page404.vue')
  }
]

 

五、二级路由

使用

二级路由通常在父级中通过 children 来编写,但不需要name属性

  {
    path: '/home',
    name: 'home',
    component: () => import('../views/home.vue'),
    children: [{
      path: 'list',
      component: () => import('../views/list.vue'),
    }, {
      path: 'more',
      component: () => import('../views/more.vue'),
    }]
  }

 

二级路由重定向

希望页面一进来可以进入特定的子级路由

  {
    path: '/home',
    name: 'home',
    component: () => import('../views/home.vue'),
    children: [{
      path: 'list',
      component: () => import('../views/list.vue'),
    },{
    path:"",
    redirect:"/home/list"
    }]
  }