在vue-cli脚手架中配置一个vue-router前端路由

前言

这篇文章给大家讲解的是在vue-cli脚手架中如何配置router" title="vue-router">vue-router前端路由的相关内容,分享出来供打击参考学习,下面来一起看看详细的介绍:

首先你需要一个main.js文件

//然后引入vue-router

import VueRouter from 'vue-router';

//使用路由

Vue.use(VueRouter);

//当然如果需要有组件进来的时候也是需要引入的

import Home from '../components/Home.vue';

import News from '../components/News.vue';

import List from '../components/List.vue';

//创建路由实例

const router = new VueRouter({

routes: [

{path:'/home',component:Home},

//path:路径 component:把你需要的组件挂载进来

{

path:'/news',

component:News,

//当你需要嵌套路由的时候你可以这么做

//children子路由,接下来的json中的内容还是一样的,需要有最基本的path和component

children:[

{path:'/news/list',component:List}

]

},

{path:'*',redirect:'/home'} //404

//当路径错误或没有这个路径的时候我们会给予一个默认路径

]

});

//最后挂在到vue实例上

new Vue({

router,

el: '#app',

render: h => h(App)

})

html代码样式

<router-link to="/home">主页</router-link>

<router-link to="/news">新闻</router-link>

<router-link to="/news/list">列表</router-link>

<router-view></router-view>

这样一个最基本的Vue前端路由就完成了!!!

总结

以上是 在vue-cli脚手架中配置一个vue-router前端路由 的全部内容, 来源链接: utcz.com/z/340018.html

回到顶部