vue-router

注意：this.$route是路由参数对象，所有路由中的参数，params,query都属于它
this.$router是一个路由导航对象，可以用它写js代码，实现路由的前进、后退和跳转。

a.全局路由的使用，要注意挂载的router
b.单页面的路由d
c.解决加载默认路由
d.激活路由样式
e.修改路由参数
f.路由嵌套
g.使用路由名称一个页面展示多个路由的内容
h.watch监听路由变化

a.全局路由的使用
1.要下载依赖: npm install --save vue-router
2.在main.js引入路由:import router from ‘./router’
import VueRouter from ‘vue-router’
3.声明使用路由:Vue.use(VueRouter)
4.创建路由,实例化对象
const router = new VueRouter({
router：router
mode:‘history’ //去掉"#"
})
或者
5.创建单独的routes.js
在router.js：
引入路由的页面：import ShowBlog from ‘./components/ShowBlog.vue’
说明路径：

import VueRouter from 'vue-router' //1.引入vue-router

//2. 导入对应的路由组件
import HomeContainer from './components/tabbar/HomeContainer.vue'
import MemberContainer from './components/tabbar/MemberContainer.vue'
import ShopcarContainer from './components/tabbar/ShopcarContainer.vue'
import SearchContainer from './components/tabbar/SearchContainer.vue'

// 3. 创建路由对象
var router = new VueRouter({
  routes: [ // 配置路由规则
    { path: '/', redirect: '/home' },
    { path: '/home', component: HomeContainer },
    { path: '/member', component: MemberContainer },
    { path: '/shopcar', component: ShopcarContainer },
    { path: '/search', component: SearchContainer }
  ],
  linkActiveClass: 'mui-active' // 覆盖默认的路由高亮的类，默认的类叫做 router-link-active
})

// 把路由对象暴露出去
export default router

或者：
配置路由：const router = new VueRouter({
routes:[
{path:“路径”,component(没s)：组件文件的名字 }
]
})

6.在main.js引入routes.js:import Routers from ‘./routes’
7.
在实例vuerouter: router
new Vue({
render: h => h(App),
！！！router: Routers！！！
}).$mount(’#app’)
8.在哪个容器使用路由:在App.vue的写
9.实现页面的导航：

<template>
    <div>
        <nav>
            <ul>
                <li>
                    <router-link to="/add">add</router-link>
                    <router-link to="/">show</router-link>
                </li>
            </ul>
        </nav>
    </div>
</template>

注意样式：
1.a{}
2.router-link-active{}//点击的路由

修改路由的参数：

 path:'/blog/:id',component:SingleBlog

当id=1,这样的话url:http://localhost:8080/blog/1
通过id:this.$route.params.id(id是path:’/blog/:id’,)传递id
在跳转的地方

b.单页面的路由

1.引入资源<script></script>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script

2.创建路由模板

   const routerA = {
            template: '<div>aaaaa</div>'
        }
        const routerB = {
            template: '<div>BBBBB</div>'
        }

3.创建路由实例 routers:

const routerObject = new VueRouter({
    routers: [{
            path: '/a',
            component: routerA
        },
        {
            path: '/b',
            component: routerB
        }
    ]
})

4.在vue注册路由

eg:  router: routerObject,

5.显示路由内容
如果在使用路由中，使用查询字符串给路由传递参数，则不需要修改路由表的path

eg:  <router-link to="/a?id=1">Go to A</router-link>
        <router-link to="/b">Go to B</router-link>
        <router-view></router-view>

c.解决加载默认路由

在写路由对象的时候写
     const routerObject = new VueRouter({
            routes: [{ 
                path: '/',
                redirect:'/a'
            }
               , {
                    path: '/a',
                    component: routerA
                },
                {
                    path: '/b',
                    component: routerB
                }
            ]
        })

d.激活路由样式
1.给激活路由class设置样式
默认的class是：“router-link-active”，如果要修改名称在new router的时候
var routerObject = new VueRouter({
routes:[ ],
linkActiveClass:myactive’
})

e.拿到路由传递的值

  eg:  <router-link to="/a?id=1&name="aaaa">Go to A</router-link>
            <router-link to="/b">Go to B</router-link>
            <router-view></router-view>
       created() {
               console.log(this.$route.query)
            },

f.修改路由参数

f.路由嵌套
在这里需要注意template写法以及路由表
children的path不能带/

account

<template id="tempq">
    <div>
        <h1>这是accout组件</h1>
        <router-link to="/account/a">登录</router-link>
        <router-link to="/account/b">注册</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
    const account = {
        template: '#tempq'
    }
    const routerA = {
        template: '<div>登录</div>'
    }
    const routerB = {
        template: '<div>注册</div>'
    }
    const routerObject = new VueRouter({
        routes: [{
            path: '/account',
            component: account,
            children: [{
                    path: 'a',
                    component: routerA
                },
                {
                    path: 'b',
                    component: routerB
                }
            ]
        }]
    })

    new Vue({
        el: '#app',
        data: {

        },
        router: routerObject,
    })
</script>
</body>
</html>

g.使用路由名称一个页面展示多个路由的内容
在这里要注意路由表的写法，名称是要括号的

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./lib/vue-2.4.0.js"></script>
        <script src="./lib/vue-router-3.0.1.js"></script>
    </head>
    <body>
        <div id="app">
            <router-view></router-view>
            <router-view name="left"></router-view>
            <router-view name="right"></router-view>
        </div>
        <script>
            var headerBox = {
                template: '<div>这是header</div>'
            }
            var leftBox = {
                template: '<div>这是left</div>'
            }
            var rightBox = {
                template: '<div>这是right</div>'
            }
            var router = new VueRouter({
                routes: [{
                    path: '/',
                    components: {
                        'default': headerBox,
                        'left': leftBox,
                        'right': rightBox
                    }
                }]
            })
            new Vue({
                el: '#app',
                router
            })
        </script>
        </body>
        </html>

h.watch监听路由变化

 watch: {
                '$route.path':function(newPath,olPath){
                   console.log(olPath,'--',newPath)
                }
              }