项目目录和vue-router起步

Vue-cli

build文件夹下的webpack.base.conf.js文件夹里面，设置了路由入口文件，代码如下。

详情请查看：https://www.cnblogs.com/ye-hcj/p/7082620.html

entry: {

    app: './src/main.js'

  }

src文件夹下有两个js文件需要区分下：

      1、main.js是整个项目的入口文件

　   2、router/index.js路由文件

  　 ps： App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。

Vue-router

　　这里的路由就是SPA（单页应用）的路径管理器。

npm install vue-router --save-dev

　　如果你在使用vue-cli中已经选择安装了vue-router，那这里不需要重复安装了。

<router-view>标签

　   点击每个导航链接都会跳转到不同的组件，这时候我们要通过<router-view></router-view>来实现。

　　<router-view>标签说明使用了路由机制（通用模板的标志，用于给子模板提供插入位置）

 　　router-view 可以当做是一个容器，它渲染的组件是使用的 vue-router 指定的。

router-link制作导航（实现基本的跳转）

<router-link to="/">[显示字段]</router-link>

to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to=”/” 

子路由的写法是在原有的路由配置下加入children字段, children字段后边跟的是个数组：

Children:[

    {path:’/’,component:Hello},

    {path:’Hi1’,component:Hi1},

    {path:’Hi2’,component:Hi2}
]    

在配置路由文件前，需要先用import引入Hi1和Hi2。

vue-router如何参数传递

　　1、通过route传参

　　2、通过to传参，代码如下

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

 　　3、通过url传递参数

　　　在路由配置文件index.js中以冒号的形式传递参数（需要时可搭配正则用），实现对参数的绑定。参考代码如下：

{
    path:'/params/:newsId/:newsTitle',
     component:Params
}

　　　　最后别忘了在App.vue加上链接标签哦！

　　ps:在文章的末尾，增加一点小知识，就是在业务逻辑代码中的页面跳转，也就是所谓的编程式导航（前进和后退），感兴趣的可以查一下下面的代码：

this.$router.go(1);
this.$router.go(-1);
this.$router.push(‘/’);

　　可以在主组件中写三个按钮，通过@click来触发实现哦。