+Vue+router のバックアップ(No.2)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
+Vue+router へ行く。
- 1 (2022-05-27 (金) 10:27:47)
- 2 (2022-05-27 (金) 11:17:43)

※前提条件：本文基于 Vue 2.0 创作

概要
路由map
路由视图
路由导航

概要 †[edit]

使用方法：

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

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

<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 †[edit]

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

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 },
      },
    ],
  },

// 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 }
        ]
    },

↑

路由视图 †[edit]

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

<router-view></router-view>

↑

路由导航 †[edit]

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

↑

router-link †[edit]

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

// 字符串
<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) †[edit]

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

↑

router.replace() †[edit]

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

↑

router.push †[edit]

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

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

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

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

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

コメント：