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>