vue 路由 - 爱码网

1、在 src/router/index.js 里定义新的路由数据

import Vue from \'vue\'
import Router from \'vue-router\'
import Hello from \'@/components/Hello\'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: \'/\',
      name: \'Hello\',
      component: Hello
    },
    {
    	path:\'/login\', name:\'login\',component:require(\'../components/Login\')
    }
  ],
  mode: \'history\' // HTML5 history 模式  否则浏览器地址会有 # 要是用这种模式需要nginx等修改对应配置 否则路由的页面会出现404错误
})

HTML5 history 模式配置

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Nginx

location / {
  try_files $uri $uri/ /index.html;
}

Nodejs Express

https://github.com/bripkens/connect-history-api-fallback

2、在需要跳转的页面添加代码

<router-link to="/login">跳转到详情页</router-link>