router の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue+router へ行く。
• +Vue+router の差分を削除

#author("2022-08-25T10:40:12+08:00","default:Admin","Admin")
#author("2022-08-25T10:42:18+08:00","default:Admin","Admin")
[[Vue]]

&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents

* 概要 [#r06a63bb]

使用方法：

+ cnpm install vue-router --save 下载路由  / npm install vue-router --save
+ 在main.js 里面引入路由：import router from './router'

安装完成后可以在 package.json 文件 -> dependencies 中看到版本号

#codeprettify{{
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签， 这可以让 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里。将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。 -->
  <router-view></router-view>
</div>
}}

* 路由map [#u662a047]

路由map指路由与组件的映射关系；

#codeprettify{{
export const constantRouterMap = [
  {
    path: '/login',
    meta: { title: '登陆', noCache: true },
    component: () => import('@/views/login/index'),
    hidden: true,
  },
  
  {
    path: '/',
    component: Layout,
    redirect: 'home', //redirect是重定向，也就是将根路径重定向到/home路径下，这样打开页面时就会默认显示首页的内容了。
    children: [
      {
        path: 'home',
        component: () => import(/* webpackChunkName:'home'*/ '@/views/home/index'),
        name: 'home',
        meta: { title: '首页', icon: 'home', noCache: true, affix: true },
      },
    ],
  },
}}

#codeprettify{{
// redirect路由重定向  值和子路由中path名相同
const routes = [
    { path: '/', redirect: '/admin' },
    {
        path: '/admin', //一级路由
        redirect: '/admin/dashboard',
        component: Layout,
        children: [{ path: 'dashboard', name: 'home', component: Home }]
    },
    // 用户管理
    {
        path: '/admin/user',
        component: Layout,
        children: [
            { path: 'index', name: 'user', component: User },
            { path: 'adduser', name: 'adduser', component: AddUser }
        ]
    },
}}

* 路由视图 [#xa916428]

路由视图指路由映射对应组件的渲染位置；

 <router-view></router-view>

* 路由导航 [#be2f16a6]

路由导航指可以使地址栏发生变化的导航链接。

** router-link [#gedeff4b]

 <router-link to="/">Go to Home</router-link>

#codeprettify{{
// 字符串
<router-link to="home">home</router-link>
// 对象
<router-link :to="{path:'home'}">home</router-link>
// 命名路由
<router-link :to="{name: 'homename'}">home</router-link>
//直接路由带查询参数query，地址栏变成 /home?ids=111
<router-link :to="{path: 'home', query: {ids: '111' \}\}">home</router-link>
// 命名路由带查询参数query，地址栏变成/home?ids=111
<router-link :to="{name: 'homename', query: {ids: '111'\}\}">home</router-link>
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{path: 'home', params: {ids: '111' \}\}">home</router-link>
// 命名路由带路由参数params，地址栏是/apple/111
<router-link :to="{name: 'homename', params: { ids: '111' \}\}">home</router-link>
}}

** router.go(n) [#d4f08f74]

这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.Go(n)

** router.replace() [#e71f5112]

跟router.push作用是一样的，但是，它不会向history添加新记录，而是跟它的方法名一样替换掉当前的history记录。所以导航后不会留下history记录，也就是不能回退到上一个页面

** router.push [#u8ad988c]

这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的url。router.push()方法里的值也可以是一个字符串路径，或者一个描述地址的对象，和上述to中规则类似。

按钮点击跳转页面为例说明

#codeprettify{{
<el-button size="mini" 
	type="text" 
	icon="el-icon-edit" 
	@click="btnEdit(scope.row)" 
	>修改 >
</el-button>
}}

在 methods 里面的 click 方法里面添加下面的代码

#codeprettify{{
btnEdit(row){
// 字符串
this.router.push('home')
// 对象
this.router.push({path:'home'})
// 命名路由
this.router.push({name: 'homename'})
//直接路由带查询参数query，地址栏变成 /home?ids=111
this.router.push({path: 'home', query: {ids: '111'\}\})
// 命名路由带查询参数query，地址栏变成/home?ids=111
this.router.push({name: 'homename', query: {ids: '111'\}\})
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
this.router.push({path:'homename', params:{ids: '111'}\})
// 命名路由带路由参数params，地址栏是/home/111
this.router.push({name:'homename', params:{ids: row.id \}\})
}
}}

上面例子里面的 name 需要在 map 里面定义

name / params 和 paht / query 的区别
+ path的query传参的参数会带在url后边展示在地址栏(/homename?ids=1)，name 的 params 传参的参数不会展示到地址栏。
+ 由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path 不能和 params 一起使用，否则 params 将无效，需要用 name 来指定页面。

参数的接收

 this.$route.query.ids
 this.$route.params.ids

* Troubleshooting [#lb14f8b3]

** Uncaught (in promise) Error: Redirected when going from "/xxx" to "/login" via a navigation guard. [#jf8f9f17]

替换路由的Push和replace方法，放在src/router/index.js中：
替换路由的Push和replace方法，放在文件 src/router/index.js 里的前部：

#codeprettify{{
import Router from 'vue-router'

const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}
}}


#hr();
コメント：
#comment_kcaptcha