vue项目的路由配置

方案一、在生成项目的时候就选择安装路由;

 

这个地方选择y即可;

生成项目之后在src目录下会有router文件夹,里面有index.js,并且里面已经存在一个helloWorld页面了,可以直接模仿着这个'例子'往下进行;

在对新建的页面首先在这个页面进行引入,然后再配置即可;

方案二、在生成项目的时候未选择安装路由;

1.首先执行npm i vue-router --save 或者 cnpm i vue-router --save (根据个人情况是否安装淘宝镜像cnpm来选择具体使用哪个命令);

2.可以在src目录下新建文件夹router,然后在router文件夹下新建文件index.js;

3.在index.js里面首先引入Vue,然后引入Router,然后再导出(看不懂这一行的话,截个图);

,注意红色框内的变量名称如果没有特殊需求的话尽量不要更改否则会出现意外的错误;

4.在main.js注册一下router,首先引入router文件夹下面的index.js文件,然后再new Vue({})定义一下(看不懂的话截个图);

可以这样做;

也可以这样做;

还有最后一步:在app.vue文件里面可以将

<HelloWorld/> 删掉 改成 <router-view/>,

注意:1.在router文件夹里面的index.js文件path设置为'/',代表着首页,

　　 2.在index.js 里面name:'hello',要加引号,而component:hello,不要加引号;