Vue的路由
引入vue-route
npm install vue-router
编写route.js
//引入vue(必要)
import Vue from 'vue'
//引入vue-route(必要)
import Router from 'vue-router'
//使用route(必要)
Vue.use(Router)
export default new Router({
//加入这句话,可以不用地址栏带上#键
mode: 'history',
base: process.env.BASE_URL,
//配置路由列表
routes: [
{
//路由uri
path: '/',
//重定向的view目录下的名称
redirect: '/index'
},
{
path: '/index',
component: Index,
redirect: '/index/main',
//子路由列表项,一般是组件
children: [
{
path: 'main',
name: 'index-main',
//组件导入
component: () => import('./components/index/index-main')
},
{
path: 'follow',
name: 'index-follow',
component: () => import('./components/index/index-follow')
},
{
path: 'hot',
name: 'index-hot',
component: () => import('./components/index/index-hot')
}
]
},
{
path: '/publishArticle',
name: 'PublishArticle',
component: () => import('./views/publishArticle')
},
{
path: '/article',
name: 'Article',
component: () => import('./views/article')
},
{
path: '/found',
name: 'Found',
component: () => import('./views/found')
},
{
path: '/login',
name: 'Login',
component: () => import('./views/login/login')
},
{
path: '/answer',
redirect: '/answer/recommend',
component: () => import('./views/answer'),
children: [
{
path: 'recommend',
component: () => import('./components/answer/recommend')
},
{
path: 'hot',
component: () => import('./components/answer/hot')
},
{
path: 'new',
component: () => import('./components/answer/new')
},
{
path: 'invite',
component: () => import('./components/answer/invite')
}
]
}
]
})
main.js中挂载vue-route
import Vue from 'vue'
//把刚刚编写的route.js引入
import router from './router'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
//把route挂载到App.vue上
router,
store,
render: h => h(App)
}).$mount('#app')
第一种路由:template在需要的地方加入route-link
常用于固定的点击跳转
<router-link to="/publishArticle">写文章</router-link>
第二种路由:js中编程式路由
用this.$router.push()的方式进行跳转,括号里name是与上面route.js中配置的name属性相对应的,这句话是跳转到name为Found的页面
this.$router.push({name: Found});