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",
}]
}