vueRouter1. 路由: 访问不同的路径，就可以返回不同的结果 2. 单页面: (spa) signle page

VueRouer路由:

1. 路由: 访问不同的路径，就可以返回不同的结果

2. 单页面: (spa) signle page application 就一个页面，切换里面的内容

3. 两种模式

hash模式 #/哈希值 eg: www.baidu.com/ ， www.baidu.com/#/bb =>#/bb锚点 (开发用)
- hash的seo不友好

H5的history.pushState()模式 eg: history.pushState('', '' ,'home') http://122.115.53.71/groupHr/home (上线用)

一回车就回请求真实的路径

一、核心东西

  ===> route:     它是一条路由，由这个英文单词也可以看出来，它是单数
  ===> routes:    routes 是一组路由，把上面的每一条路由组合起来，形成一个数组,  路由表 new VueRouter({routes: []})
  ===> router:    router 是一个机制，相当于一个管理者，它来管理路由  , 注册到跟组件上去
  
  ===> $route   每个组件都会有一个名字叫$router的属性，存放的都是属性， 这条路由的信息
  ===> $routr   每个组件都会有一个名字叫$router的属性，存放的都是方法，  管理路由对象
  
  HTML标记
  ===> <router-view></router-view>   匹配到路由，将要显示的内容在这里
  ===> <router-link></router-link>   单击实现路由跳转
      - tag = 'html标记'          -> 渲染为什么标记 
      - to ='某条路由里面的name'   -> 跳转到哪个路由  /必须加
      
  ===> 路由传参数
  
  ==> 父子组件通信

二、路由步骤

1.导入需要的路由

npm install vue-router vue axios --save 安装到生产环境中 、 -save  --save-dev安装到开发环境中
===> import Vue from 'vue'
===> import VueRouter from 'vue-router';
===> Vue.use(VueRouter); //==>>注入vue-router路由

2.导入组件(.vue)

===> import HelloWorld from './components/HelloWorld';
===> import Login from './../components/Login';

3.定义路由表

const routes = [
  {
  	path: '/hello',     => 路径    =>/ 代表的是路径， 不能去掉，注意   < #后面的匹配 >
  	name: 'hello',      => 跳转的时候会用到  <router-link to='/hello'><router-link>
  	component: HelloWorld    component: 对应页面级组件  component没有s哦!!!
  },
  	{
  	path: '/login/:id/:userName',   // ==>>动态传值的   this.$route.params.id 、 this.$route.params.userName
  	name: 'login',                  <router-link to='login/1001/vue' tag='div'>login</router-link>
  	component: Login
  }
];

4.创建vueRouter实例

const router = new VueRouter({    // ==> global.VueRouter = factory() 工厂函数返回一个类， 放到window对象上，全局的
    routes
});
console.dir(router); // ===>>详细查看vueRouter上的方法和属性，原型上
console.dir(VueRouter); // ===>>查看静态方法和属性

5.vue实例注册路由

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

给出在页面显示的位置

file:///C:/Users/Administrator/Desktop/vueRouter/1.html#/    后面是名称
===>> <router-view></router-view> 匹配到的路由，对应组件内容显示到这里
 全局注册组件:   源码定义的 
                 Vue.component('router-view', View);
                 Vue.component('router-link', Link);
    
=> 核心注册俩个全局组件
  Vue.component('router-view', View);
  Vue.component('router-link', Link);

其他知识补充:

路由跳转

    router-link
    属性: 
        tag  html标记
        to    跳转到哪个路由

动态路由，路由传参数

```
{
    path: 'home/:id/:x/:y'
}
this.$route.params.接收一对象

URL地址: file:///C:/Users/Administrator/Desktop/vueRouter/2.html#/home/100/200
const home = {
	 template: '<div>home{{this.$route.params}}</div>'  // ===>> home{ "id": "100" ,"x":200}
};

配置:
{
	path: '/home/:id/:x',
	component: home
},

三、项目结构:

  router
    --- index.js   配置路由
    --- routes.js  存储路由表配置的
  
  
  ==>routes.js
           import HelloWorld from './../components/HelloWorld';
           import Login from './../components/Login';
           const routes = [
           	{
           		path: '/hello',
           		name: 'hello',
           		component: HelloWorld
           	},
           	{
           		path: '/login',
           		name: 'login',
           		component: Login
           	}
           ];
           export default routes;
           
   ==>index.js
           import Vue from 'vue'
           import Router from 'vue-router'
           import routes from './routes'
           
           Vue.use(Router)
           
           export default new Router({
             routes,
             mode: 'history', //浏览器模式，通过history.pushState('', '', '/home')去访问, 默认是hash模式
             linkAactiveClass: 'active',   //更改默认样式类名，默认叫router-link-active改为active
           });

四、动态路由，传入参数进行查询，商品详情

获取参数  => 
 {{this.$route.params.id}}
 {{this.$route.params.x}}
 {
 	path: '/login/:id/:userName',
 	name: 'login',
 	component: Login
 }
 
<router-link to='login/1001/vue' tag='div'>login</router-link>

五、嵌套路由 children:[{}] 传值问题

children去配置子路由，里面path直接写，不可以加/ {paht: 'base'}
router-link to 必须要写全部 router-link to='/home/base'
里面的to两种用方法
- 静态式: 静态传入
- 动态式: 动态传入

children配置问题:

六、编程式导航 在JS里面进行控制跳转

history
hash
abstract

声明式:  <router-link to='/home' tag='div'>home</router-link>   [  /home 和路由表的某条路由 path的值要对应 ]

编程式: 
    A: push() 方法 将你定义的路由放到路由栈里面，先进先出原则
        {
                path: '/B',
                name: 'componentB',
                component: componentB,
        }
    
         name=>是路由配置的name, path: 是路由配置里面的path
        传值重要:
            1. this.$router.push('componentB');   //组件名
            2. this.$router.push({name:'componentB'}) //组件名
            3. this.$router.push({name:'componentB', params:{id:100}}) //组件名  params传参数
            4. this.$router.push({path:'B', query:{userId:'10010009'}}); //query传参数
            5. this.$router.push({path:`B/${userId}`); //query传参数
            let userId = '1001';
            5. this.$router.push({ path: `/user/${userId}` }); 
        
        
     
    B:replace()方法  替换当前路由为你定义的路由 (替换掉当前的 history 记录) 用法和push一样
    
    
    
    
    C:go(n)  ==> window.history.go(n)  意思是在 history 记录中向前或者后退多少步
      1) this.$router.go(-1); 前进一步   ==> history.back()
      2) this.$router.go(1);  后退一步   ==> history.forward()
      3) this.$router.go(100); 没有这么多步数，失败

七、命名路由 加入name属性，更加方便

    第一种: <router-link :to="/home">go List</router-link>
    第二种: <router-link :to="{name: 'home',params:{id:1}}">go Home</router-link>   //=> :to动态绑定,传值
    
    
    <router-link :to="{name: 'list',params:{id:2}}">go List</router-link>
    <router-view/>

     let home = {
        template: '<div>home {{this.$route.params.id}}</div>'  //==> this.$route.params 获取参数
    };

    let list = {
        template: '<div>list {{this.$route.params.id}}</div>'
    };


    const routes = [
        {
            path: '/home',
            name: 'home',   //==>> to的时候使用name
            component: home
        },
        {
            path: '/list',
            name: 'list',
            component: list
        }
    ];

八、*重定向 路由 => redirect 配置时候设置

***用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，显示b路由内容

1. 直接重定向                           => { path: '/a', redirect: '/b' }
2.重定向的目标也可以是一个命名的路由    => { path: '/a', redirect: { name: 'foo' }}
3.甚至是一个方法，动态返回重定向目标：
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
   
   
   
    {
        path: '/home',
        name: 'home',
        component: home,
        //redirect: '/list'
        redirect:{name:'list'}
    }

九、*路由别名

// => /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
routes: [
    { path: '/a', component: A, alias: '/b' }
 ]

十、

  new Vue({
    el: '#app',
    router   // ==============>> 每个组件都会有一个名字叫$router的属性(有r的放的都是方法)， $route都是放的属性
  });