router
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents
* 概要 [#r06a63bb]
使用方法：
+ cnpm install vue-router --save 下载路由 / npm install ...
+ 在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` 属性的 ...
<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是重定向，也就是将根路径...
children: [
{
path: 'home',
component: () => import(/* webpackChunkName:'home...
name: 'home',
meta: { title: '首页', icon: 'home', noCache: tru...
},
],
},
}}
#codeprettify{{
// redirect路由重定向 值和子路由中path名相同
const routes = [
{ path: '/', redirect: '/admin' },
{
path: '/admin', //一级路由
redirect: '/admin/dashboard',
component: Layout,
children: [{ path: 'dashboard', name: 'home', com...
},
// 用户管理
{
path: '/admin/user',
component: Layout,
children: [
{ path: 'index', name: 'user', component: Use...
{ path: 'adduser', name: 'adduser', component...
]
},
}}
* 路由视图 [#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' \}\}"...
// 命名路由带查询参数query，地址栏变成/home?ids=111
<router-link :to="{name: 'homename', query: {ids: '111'\}...
//直接路由带路由参数params，params 不生效，如果提供了 pat...
<router-link :to="{path: 'home', params: {ids: '111' \}\}...
// 命名路由带路由参数params，地址栏是/apple/111
<router-link :to="{name: 'homename', params: { ids: '111'...
}}
** router.go(n) [#d4f08f74]
这个方法的参数是一个整数，意思是在history记录中向前或者后...
** router.replace() [#e71f5112]
跟router.push作用是一样的，但是，它不会向history添加新记...
** router.push [#u8ad988c]
这个方法会向history栈添加一个新的记录，所以，当用户点击浏...
按钮点击跳转页面为例说明
#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 不生效，如果提供了 pat...
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后边展示在地址栏(/homenam...
+ 由于动态路由也是传递params的，所以在 this.$router.push(...
参数的接收
this.$route.query.ids
this.$route.params.ids
* Troubleshooting [#lb14f8b3]
** Uncaught (in promise) Error: Redirected when going fro...
替换路由的Push和replace方法，放在文件 src/router/index.js...
#codeprettify{{
import Router from 'vue-router'
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve...
if (onResolve || onReject) return originalPush.call(thi...
return originalPush.call(this, location).catch(err => e...
}
}}
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents
* 概要 [#r06a63bb]
使用方法：
+ cnpm install vue-router --save 下载路由 / npm install ...
+ 在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` 属性的 ...
<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是重定向，也就是将根路径...
children: [
{
path: 'home',
component: () => import(/* webpackChunkName:'home...
name: 'home',
meta: { title: '首页', icon: 'home', noCache: tru...
},
],
},
}}
#codeprettify{{
// redirect路由重定向 值和子路由中path名相同
const routes = [
{ path: '/', redirect: '/admin' },
{
path: '/admin', //一级路由
redirect: '/admin/dashboard',
component: Layout,
children: [{ path: 'dashboard', name: 'home', com...
},
// 用户管理
{
path: '/admin/user',
component: Layout,
children: [
{ path: 'index', name: 'user', component: Use...
{ path: 'adduser', name: 'adduser', component...
]
},
}}
* 路由视图 [#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' \}\}"...
// 命名路由带查询参数query，地址栏变成/home?ids=111
<router-link :to="{name: 'homename', query: {ids: '111'\}...
//直接路由带路由参数params，params 不生效，如果提供了 pat...
<router-link :to="{path: 'home', params: {ids: '111' \}\}...
// 命名路由带路由参数params，地址栏是/apple/111
<router-link :to="{name: 'homename', params: { ids: '111'...
}}
** router.go(n) [#d4f08f74]
这个方法的参数是一个整数，意思是在history记录中向前或者后...
** router.replace() [#e71f5112]
跟router.push作用是一样的，但是，它不会向history添加新记...
** router.push [#u8ad988c]
这个方法会向history栈添加一个新的记录，所以，当用户点击浏...
按钮点击跳转页面为例说明
#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 不生效，如果提供了 pat...
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后边展示在地址栏(/homenam...
+ 由于动态路由也是传递params的，所以在 this.$router.push(...
参数的接收
this.$route.query.ids
this.$route.params.ids
* Troubleshooting [#lb14f8b3]
** Uncaught (in promise) Error: Redirected when going fro...
替换路由的Push和replace方法，放在文件 src/router/index.js...
#codeprettify{{
import Router from 'vue-router'
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve...
if (onResolve || onReject) return originalPush.call(thi...
return originalPush.call(this, location).catch(err => e...
}
}}
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
