CARVIEW |
Select Language
HTTP/2 200
date: Fri, 25 Jul 2025 01:33:18 GMT
content-type: text/html; charset=utf-8
vary: X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, X-Requested-With,Accept-Encoding, Accept, X-Requested-With
etag: W/"13fc3775b97327883c3ade77057bf032"
cache-control: max-age=0, private, must-revalidate
strict-transport-security: max-age=31536000; includeSubdomains; preload
x-frame-options: deny
x-content-type-options: nosniff
x-xss-protection: 0
referrer-policy: no-referrer-when-downgrade
content-security-policy: default-src 'none'; base-uri 'self'; child-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com *.rel.tunnels.api.visualstudio.com wss://*.rel.tunnels.api.visualstudio.com objects-origin.githubusercontent.com copilot-proxy.githubusercontent.com proxy.individual.githubcopilot.com proxy.business.githubcopilot.com proxy.enterprise.githubcopilot.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com api.githubcopilot.com api.individual.githubcopilot.com api.business.githubcopilot.com api.enterprise.githubcopilot.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com copilot-workspace.githubnext.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: blob: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com private-avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com release-assets.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com copilotprodattachments.blob.core.windows.net/github-production-copilot-attachments/ github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/
server: github.com
content-encoding: gzip
accept-ranges: bytes
set-cookie: _gh_sess=HbfbobCE80A1lgWHCCXWqgghNr7SsnWetou0kV7dVuZ1q8U9hcvrknhcUiJECegyiUr%2F6l65xfjx8%2B%2B8pXTPwdJ%2FaGv%2FLyKXOefe0mmhpIUjMyi5bP3cR6%2FL990IqhemlReIJExCEY4tOiUCJ%2F4difjEU2lcTSKI0jpiE93QiZ2uZ6wtczWCoS0rRvU8q0fX3t3UswPSeu46YyWh1vr7z95cTxrdXXrCGjiAlHuf8e6OlSF5ICVVzNXVGNwsGkKf7S20CqlrBsLrpjK%2BmmyCeA%3D%3D--6%2BmWQ03oB3Q8CxEc--RlrhTjuBIurA0BOSXvzzTA%3D%3D; Path=/; HttpOnly; Secure; SameSite=Lax
set-cookie: _octo=GH1.1.555936075.1753407198; Path=/; Domain=github.com; Expires=Sat, 25 Jul 2026 01:33:18 GMT; Secure; SameSite=Lax
set-cookie: logged_in=no; Path=/; Domain=github.com; Expires=Sat, 25 Jul 2026 01:33:18 GMT; HttpOnly; Secure; SameSite=Lax
x-github-request-id: B2AC:15F96:81404:C8EC1:6882DEDE
Router · iview/iview-admin Wiki · GitHub
Skip to content
Navigation Menu
{{ message }}
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Router
Lison edited this page Nov 21, 2017
·
2 revisions
成功运行iview-admin之后,您就可以开始动手修改它,将自己的内容替换进去了。 首先最基础也是最重要的,应该说是路由配置,路由配置里目前有三种类型的配置,对应三种页面的展示类型。直接来看代码:
./src/router.js
export const loginRouter = {
path: '/login', //必填
name: 'login', // 必填,页面都以name值来加载
meta: {
title: 'Login - 登录' // 非必填,若不填默认显示iview-admin(后面会介绍在哪修改默认显示的值)
},
component: resolve => { require(['./views/login.vue'], resolve); } // 必填,用来加载该路由规则对应的视图,resolve用来控制异步加载
};
export const otherRouter = {
path: '/', // 必填
name: 'otherRouter', // 必填,在面包屑处理中需要用到,值固定为otherRouter(或者可以在./src/libs/util.js中修改)
redirect: '/home', // 选填,这里如果不填在浏览器地址栏输入域名后自动跳转到首页
component: Main, // 必填,主组件,用于加载侧边栏和右侧面包屑、标签栏、工具条、子页面路由视图等
children: [ // 在Main右侧视图显示的页面都要作为otherRouter的children来添加
{ // home页面
path: 'home', // 必填,在地址栏将以 '域名/home'的的形式呈现
title: '首页', // 必填,这个title会在标签栏显示
name: 'home_index', // 必填,该页面是通过name值来加载的,切记每个路由对象的名字都要和其他的不一样
component: resolve => { require(['./views/home/home.vue'], resolve); } // 必填
}
]
};
export const appRouter = [
{ // a.第一种情况:只有一级菜单
path: '/access', // 必填
redirect: '/access/index', // 选填,如果不填也会跳转到这个路径
icon: 'key', // 必填,此icon将显示在左侧菜单栏
name: 'access', // 必填
title: '权限管理', // 必填,此title值将显示在左侧菜单栏
component: Main, // 必填,且固定,用于加载Main组件
children: [ // 要显示在右侧区域的页面必须作为children来添加
{
path: 'index', // 必填
title: '权限管理', // 必填,将显示在标签栏对应标签
name: 'access_index', // 必填,且不能和其父路由的name不一致(与其他任何路由的name值都不能一致)
component: resolve => { require(['./views/access/access.vue'], resolve); } // 必填
}
]
},
{ // b.第二种情况:有二级菜单
path: '/component', // 必填
redirect: '/component/text-editor', // 选填,如果不填在地址栏输入'域名/access'时将默认打开此一级菜单对应的第一个二级菜单页面
icon: 'social-buffer', // 必填,同上
name: 'component', // 必填,同上
title: '组件', // 必填,同上
component: Main, // 必填,同上
children: [ // 必填,同上
{
path: 'text-editor', // 必填,同上
icon: 'compose', // 必填,同上
name: 'text-editor', // 必填,同上
title: '富文本编辑器', // 必填,将显示在左侧菜单栏二级菜单
component: resolve => { require(['./views/my_components/text-editor/text-editor.vue'], resolve); } // 必填
},
{
path: 'md-editor', // 必填,同上
icon: 'pound', // 必填,同上
name: 'md-editor', // 必填,同上
title: 'Markdown编辑器', // 必填,同上
component: resolve => { require(['./views/my_components/markdown-editor/markdown-editor.vue'], resolve); }
}, // 必填
]
}
}
您还可以为页面配置权限,在左侧菜单初始化的时候,会通过当前登录用户的权限值来过滤路由配置,从而决定在左侧菜单栏显示哪些选项。权限配置很简单,只需在路由对象里设置'access'属性即可:
{
path: '/access-test',
icon: 'lock-combination',
title: '权限测试页',
name: 'accesstest',
access: 0, // 如果设置access值,那么当登录用户的权限值不为0时则该菜单及其二级菜单都不会出现在左侧菜单栏;
// 如果不设置access值,那么该菜单默认显示;
// access如果只有一个权限值过滤,那么直接写一个数字即可(如这的0),如果有多个,则写成数组类型(如[0,1])。
component: Main,
children: [
{ path: 'index', title: '权限测试页', name: 'accesstest_index' }
]
},
You can’t perform that action at this time.