?  

?

 ?  vue路由的安装

在前面文章脚手架的介绍中,如果你用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由，如果选择y，后面下载依赖会自动下载vue-router

如果没有安装路由,name请看下面的指令

npm install vue-router

 ?  vue路由的组件

  ?  <router-link>

使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

  ?  切换路由

   to="/user"

举个栗子:

 
              ?  切换路由的地址

<router-link :to="{'name':'about'}">关于</router-link>
<router-link :to="{path:'/product/def',query:{age:18},hash:'best'}">产品</router-link>

    ?    <router-view>存放路由

显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

 ?  路由配置  /router/index

 ?   普通

  {
  path:"/user",
  name:"user",
  component:()=>import(xxx)
}

  ?   传参

     第一步在router里配置

   {
  path:"/product/:id",
  name:"product",
  component:xxx
}

第二步:在App.vue中链接 

   <router-link to="/product/abc">

第三步: 在页面中获取

$route.params.id

 ?   404         注意:要配置在最后面

{
   path:"*"
}

 ?  编程式路由跳转  $router

• ?      前进   forward()           
•                       go(1)
•   ?      后退     back()
•                           go(-1)
•  ?       切换路由   push("/about")
•  ?       替换路由(不留当前页面历史记录)             replace("/about") 

 ?  路由信息    $route

•     路由参数    params
•     查询           query
•     地址            path
•     全地址        fullPath
•     名称            name
•     哈希值         hash

 ?  路由守卫

    组件内部

    ?      进入前

beforeRouterEnter(to,from,next)

 to 要进入的路由
from 从哪个页面进入
next下一步

   ?  next() 进入to页面

next(true) 进入to页面
next(false) 不跳转
next("/login") 跳转到登录

?     离开前        beforeRouterLeave

?    更新前        beforeRouterUpdate

?     全局         beforeEach((to,from,next)=>{})
                          afterEach

 ?    独享         beforeEnter()

 作用:进入离开页面前做拦截,处理事情(跳转提示,权限检查)

 ?  路由元信息  

 语法结构:

    {path:path,name,component,
  meta:{noFooter:true}
}
    $route.meta.noFooter 范围

 ?  路由查询参数

 ?      传递
next("/login?redirect=/cart")

  ?     获取
var redirect = this.$route.query.redirect||'/user'

举个栗子:

// 希望 cart页面 都需要登录才能进入
// 在这些页面定义meta:{requireAuth:true}
// 使用全局守卫(每个路由页面进入前都会执行 beforeEach的回调函数)
router.beforeEach((to, from, next) => {
	if (to.meta.requireAuth) {
		// 如果需要权限,判断
		if (localStorage.getItem("token")) {
			// 如果有token
			next(true);
		} else {
			// 跳转到登录页面redirect
			next("/login?redirect=" + to.path)
		}
	} else {
		// 直接下一页
		next(true)
	}
})