1.安装路由Router安装依赖。
npm install vue-router
2.在index.js中引入Router文件
import Router from 'vue-router'
3.全局注册路由
Vue.use(Router)
4.在router文件夹 index.js 中使用Router路由
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes:[{
path:' 地址'，
name: ' 名字 ',
component: () => import('组件地址')
}, {
path:' 地址'，
name: ' 名字 ',
component:组件名
},{
path:' 地址'，
name: ' 名字 ',
component:组件名
}]
})
5.在main.js文件中注入路由
import router from './router'
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
1. children:[]可以设置子路由；redirect可以设置默认组件。
2. <router-link to='跳转地址' tag='改变标签'></router-link> 默认是a标签
3. <router-view></router-view>------路由出口，路由匹配到的组件将渲染这里。
|
