vue-router（1）

1.什么是路由？

根据不同的地址跳转到不同的页面

2.单页面应用：通过js使页面看起来到了另一个页面，但是其实这个页面一直没有刷新

不用频繁的与服务器进行请求，不需要把整个页面进行刷新，而是通过ajax技术进行了局部刷新

3.设置路由

a、为项目安装vue-router

npm install vue-router --save

在package.json文件中会添加vue-router依赖的配置

并且在node-modules中会添加这个依赖包

 

b、在入口文件里引入 importVrouter from 'vue-router'

Vue.use(Vrouter);全局注册使用

c、设置一个map规定什么地址访问什么组件，

router_view：在什么位置显示什么样的页面

router-link:在页面上如何跳转到另一个页面

d、假设在main.js文件中设置路由表：

（也可以在其他的js文件中设置，然后通过在main.js中import vue-router from 'router_a'引入） 

import Vue from 'vue'

import App from './App'

import Vrouter from 'vue-router'

import Apple from './components/apple'

let router =new VRouter({

         mode:'hostory'//不需要使用哈希，而是直接输入这个地址

//比如：localhost：8080/#/apple中间有一个‘#’使用了‘mode’就没有了

         routers:[

           {

                   path：‘/apple’,

                   component:Apple   

            }，

 

            {

                   path：‘/banana’,

                   component:Banana

            }

         ]//在实例化的时候进行配置

})

注意：每一个路由项之间要用逗号隔开

实例化好了如何使用？

 

new Vue({

el：“#app”,

router:router,//引入，可直接简写为：router，

template:"<App/>",

components:{App}

})

e、做好上面的映射表过后，规定在路由里设定的这个组件在哪里显示？

假如在App.vue中

<router-view></router-view>所在的位置，我们访问.../apple的时候，将Apple

这个组件加载到这个位置，访问.../banana的时候，将Banana的时候，将Banana加载

到这个位置

f、<router-link ：to="{path:'csy'}">tocsy</router-link>设置跳转

如果不加：,会导致{path:'csy'}都变为路径名的一部分

 

4、路由参数

什么是路由参数？

 

像这样，我们在访问的时候，在地址栏输入一个…/csy/red输入了一个red以后被路由接收到

那么如何在组件内部去使用这个参数呢？

由于router在每个组件中都可以使用一个全局对象$router,因此可以获取到路由参数 

特别注意：由于我们在path设置的时候添加了一个参数，所以加入我们在访问的时候地址栏不输入参数，那么无法路由到这个组件