这篇文章主要讲一下路由的引入以及具体的使用

更多详细用法参考这篇文章吧，写得很详细，很不错
点击此处

1.引入路由：

1.npm的引入规则：

npm i vue-router -S

安装完成之后按照以下步骤:

在main.js中进行注册：

import VueRouter from 'vue-router';

引入之后继续在main,js中:

Vue.use(VueRouter);

声明完之后，继续在main.js中创建拦截规则:
首先先声明一个路由拦截规则：

const routes = [
    { path: '/success', component: success },
    //前面to指定的地方 path  /1
]

注意：以后访问http://localhost:8080/success这个指令就会跳转到success这个组件对应的页面，当前在使用之前切勿忘记import(import success from ‘./components/success.vue’)
声明之后开始声明一个路由,还是在main,js中:

const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes
})

注意上面的routes要和你声明路由拦截规则定义的名字一致,接着在构件vue时进行注册，即在main,js下的new vue里面加入:

new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

到此路由就可以使用了

vue路由的使用

这篇文章主要讲一下路由的引入以及具体的使用

1.引入路由：

猜你喜欢