Vue中的router使用方法

概念

路由就是一个网址，它当中的路由参数也是指网址参数
路由参数：根据路由参数显示不同的内容 ->不同的组件 手册

初体验

<div id="app">
    <ul>
        <li><router-link to="/films">电影</router-link></li>
        <li><router-link to="/yingyuan">影院</router-link></li>
        <li><router-link to="/tehui">特惠</router-link></li>
        <li><router-link to="/my">我的</router-link></li>
    </ul>
    <router-view /> 
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 步骤1：引入vue.js和vue-router.js文件
// 步骤2：创建组件   通过Vue.component来定义   或者简写  
// 步骤3：声明路由   通过new VueRouter传递对象 routes数组 
// 步骤4：在new Vue里面注册激活路由
// 步骤5：在页面挖坑显示   <router-view /> 
const films = {
    template: `<h1>电影区域</h1>`
}

const yingyuan = {
    template: `<h1>影院区域</h1>`
}

const tehui = {
    template: `<h1>特惠区域</h1>`
}

const my = {
    template: `<h1>我的区域</h1>`
}

// 声明组件访问路径
const router = new VueRouter({
    // mode: 'hash', 通过location.hash切换，通过window.onhashchange 监听切换
    mode: 'history', //通过history.pushState 切换,window.onpopstate 监听路径的切换
    // 当路由模式从hash改变成history时，
    // 有时候本来好好的网站突然访问不了了
    // 可能因为服务器配置文件
    // https://router.vuejs.org/zh/guide/essentials/history-     mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
    // TODO. vue后面项目写完，大家统一先hash模式上线
    //       然后切换history
    routes: [// 特别注意其他地方都是router 只有这里是routes
         // path路由参数访问地址
        // name后期可以根据名字跳转
        // component这个路由显示的组件数据
        {path: '/', name: 'index', component: films},
        {path: '/yingyuan', name: 'yingyuan', component: yingyuan},
        {path: '/tehui', name: 'tehui', component: tehui},
        {path: '/my', name: 'my', component: my},
        {path: '/my', name: 'my', component: my, alias: '/a'},
        // /my-*   匹配my-开头的路由
        // *       匹配所有路径（上面路由都不匹配  则走下下面这个）
        {path:'*', redirect: '/'}
    ]
})
//定义vue并激活路由
let vm = new Vue({
    // 激活路由
    // router:router,
    router,

    // el: '#app',
    data: {

    }
}).$mount('#app')
</script>

redirect: ‘path里面声明的路径’ 声明重定向/跳转网址
alias:‘名字/别名’ 就是有两个网址参数

多学一招：
path里面可以通过通配
my- 匹配my-开头的路由
*匹配所有路径

vue路由原理

vue路由是基于单页面应用SPA思想/规则实现的
基于BOM的location和history实现的

hash
location.hash = 值
location.onhashchange = 处理函数
history
history.pushState = 值
history.onpopstate = 处理函数

在这提到的单页面应用SPA在项目中规定了页面局部刷新，从而减少HTTP请求 加快页面响应速度，提高用户体验度，但不利于SEO优化

嵌套路由

一个网址显示多个组件（肯定是父子关系）

<div id="app">
    <router-view></router-view>
</div>
<script>
    // 定义组件
    const app = {
        template: `
            <div>
                <div class="header">头部</div>
                <div class="nav">
                    <router-link to="/users" >用户管理</router-link><br />    
                    <router-link to="/goods" >商品管理</router-link>
                </div>
                <fieldset>
                    <legend>内容区域</legend>
                    <!-- 父挖坑显示子 -->
                    <router-view />
                </fieldset>
            </div>
        `
    }

    const users = {
        template: `<div>用户列表内容</div>`
    }

    const goods = {
        template: `<div>商品列表内容</div>`
    }

    // 创建路由
    const router = new VueRouter({
        routes: [
            // {path: '/', component: app},
            // {path: '/users', component: users},
            // {path: '/goods', component: goods}
            // 先父路径 再子路径
            // /users
            {
                path: '/', 
                component: app,
                children: [// 子统一直写名称
                    {path: 'users', component: users},
                    {path: 'goods', component: goods}
                ]
            },
        ]
    })

    // 激活
    let vm = new Vue({
        router,
        el: '#app',
        data: {

        }
    })
</script>

实战过程中大家也会对routes、route、router产生混淆

这里的routes是vue-rouer里面的配置方法，可以用来创建多个路由对象，而route为router中可以获取name、path、query、params等，，router是创建VueRouter的一个实例，一般使用在编程式导航中，如$router.push方法

编程式导航：js的跳转方式

注意：路由传递参数和传统传递参数是一样的，命名路由类似表单提交而查询就是url传递，在vue项目中基本上掌握了这两种传递参数就能应付大部分应用了

1.params搭配路由传递，刷新页面参数会丢失
2.query查询参数搭配传递，刷新页面数据不会丢失
3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

1：无参数 ：地址语法
router.push({ path: ‘/home’ })
2：有参数 /user/123
router.push({ path: ‘user’, params: { userId: ‘123’ }})
3：有参数 /user?userId=123
router.push({ path: ‘user’, query: { userId: ‘123’ }})

1：无参数 ：名字语法
router.push({ name: ‘user’ })
2：有参数 /user/123
router.push({ name: ‘user’, params: { userId: ‘123’ }})
3：有参数 /user?userId=123
router.push({ name: ‘user’, query: { userId: ‘123’ }})

在vue/cli中main.js中可以添加全局导航守卫判断用户是否登录

//导航守卫：名词，只要路由变化就触发
router.beforeEach((to, from, next) => {
  // to.path 新路由
  // from.path 旧路由
  // next({path: 路径})   跳转指定路由
  // next()               向下匹配，如果不写就卡死
  
  // console.log(to)
  var mytoken = localStorage.getItem("mytoken")
  //如果用户访问的不是登录页  &&  数据又不在
  if (to.path != '/login' && !mytoken) {
      next({path:'/login'}) 
      return
  } 
  next()
})