vue2.0 路由基本配置

1.路由的基本配置

路由我们理解成是url,我们不用手动挂载组件，通过路由可以自动挂载组件。

(1)安装

npm install vue-router --save 或 cnpm install vue-router --save

(2)引入并Vue.use(VueRouter)(在router目录下的index.js)

import VueRouter from 'vue-router'

(3)实例化并配置路由(在router目录下的index.js)

export default new Router({
 routes: [{
   path: '/',//首次进入默认的路由是/index
   redirect: "/index"
  },
  { ///未登录邀请页面
   path: "/inviteNoLogin",
   name: "inviteNoLogin",
   component: inviteNoLogin
  }
}
(4)挂载 在main.js里面引入./router/index.js
import router from './router/index.js',
new Vue({
 el: '#app',
 router,
 components: {
  App
 }
})
(5)在跟组件的模板里面加上

<router-link to="路由配置的path"></router-link>和<router-view></router-view>

router-link是跳转的配置

router-view是路由页面进行显示的区域

上面是基本的路由配置的例子。

路由嵌套（子路由）

子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式。

子路由的配置:(个人理解子路由就是用以上的例子举例/newWallet/p1,/newWallet/p2)这两个就是子路由，简单理解必有首页里面有三个组件。商家，商品，评论，在评论里面会有几部分（左侧和右侧，点击左侧右侧的内容变化）这个也是典型的路由嵌套的例子。

配置如下：

path: "/newWallet ",

name: "newWallet ",

component: newWallet

children:[{

path: "/newWallet /p1",

},{

path: "/newWallet /p2",

}]

}