🍓  

🐇

 🍓  vue路由的安装

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

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

npm install vue-router

 🍓  vue路由的组件

  🐇  

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

  🐇  切换路由

   to="/user"

举个栗子:

 
              🐇  切换路由的地址

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

    🐇    存放路由

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

 🍓  路由配置  /router/index

 🐇   普通

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

  🐇   传参

     第一步在router里配置

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

第二步:在App.vue中链接 

   "/product/abc">

第三步: 在页面中获取

vue路由拦截及页面跳转的设置方法

pdf 0星 超过10%的资源 31KB

下载

$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页面

vue路由传参三种基本方式详解

pdf 0星 超过10%的资源 35KB

下载

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)
	}
})