• Vue-router 前端路由


    前端路由:

      前端路由主要是使用Hash (....#/login)进行路由切换的,不会刷新页面,类似于页面中的锚链接,只是在单页面中进行切换,并不会向后端发送请求。

      可以再router中设置属性mode 为 "history" 使得路由编程 /login.

    后端路由:

      后端路由主要是没有路由都会向后端发送请求,都会刷新页面

    npm 安装:

    npm install vue-router
    
    //在对应的模块中将其绑定到Vue上。
    
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)

    任何组件内访问路由器:this.$router,就是整个的路由对象;

    访问当前路由:this.$route;

    1.组件的路由切换

    <div id="app"> <!-- 使用router-link 代替原本的a链接 tag表示最终渲染成的标签 同时具备了点击切换组件的功能 --> <router-link to="/login" tag="span">登录</router-link>
      
      //除了使用router-link来定义导航连接,还可以使用router的实例方法:
       

      // this.$router.push(location,onComplete?,onAbort?) //类似window.location.href,向histroy栈中添加一个新的
      // 带查询参数,变成 /register?plan=private
     
    //router.push({ path: 'register', query: { plan: 'private' }})
      //toute

      <router-link to="/register" tag="a">注册</router-link> <!-- 切换的组件的占位符 ,显示切换到的组件--> <router-view></router-view> </div> <template id="login"> <h3>登录</h3> </template> <template id="register"> <h3>注册</h3> </template> <script> var login = { template:"#login", } var register = { template:"#register" } const router = new VueRouter({ routes:[
          // component中的login是子组件对象,不是字符串。
            {path:"/",redirect:"/login"}, //设置默认路由 重定向
            {path:"/login",component:login, alias: '/b'}, //alias 起别名 使用/b 和使用/login的作用一样 都会跳转到login组件上。
            {path:"/register",component:register,name:"register"},
         //<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
        {path:"*"} //匹配所有路径,一般放到最后,匹配404文件
        {path:“/user-*”}//匹配所有以 /user-开头的路径
    // 路径放置的顺序会影响匹配 ] })
    new Vue({ el:"#app", data:{ }, components:{ login,register }, // 将路由和Vue实例实现绑定。 router:router,//也可直接 router, })



     2.路由嵌套

    <div id="app">
        <h3>主页</h3>
        <router-link to="/main">main页面</router-link>
        //maink组件的占位
        <router-view></router-view> 
      </div>
    
      <template id="maink">
       <div>
          <h3>main</h3>
      //router-link中的地址必须是绝对地址/main/login,如果是login则会跳转到/login下。   //子组件被切换的时候,并不会销毁原来的所有组件,而是复用了其他组件只销毁了子组件。
    //也就是说/mian/login跳转到/main/register的时候,/main组件并不会重新的构建或是重新的调用created函数。

    <router-link to="/main/login" >登录</router-link> <router-link to="/main/register">注册</router-link> <transition name="my" mode="out-in"> // 登录或是注册组件的占位 <router-view></router-view> </transition> </div> </template> <template id="login"> <h3>登录</h3> </template> <template id="register"> <h3>注册</h3> </template> <script> var maink = { //template的id值不能和DOM的标签一样 template:"#maink", } var login = { template:"#login", } var register = { template:"#register" } const router = new VueRouter({ routes:[ { path:"/main", component:maink, children:[//子路由 { path:"login",//注意不是从根目录开始的 不加斜杠 component:login, },{ path:"register", component:register } ] }, ] }) new Vue({ el:"#app", data:{ }, components:{ login,register, maink }, // 将路由和Vue实例实现绑定。 router:router,//也可直接 router, })

     3.路由传值

      

    <div id="app">
      
        <router-link to="/login?id=99&name=zzzz">登录</router-link>
        <router-link to="/register/444">注册</router-link>
        <router-view></router-view> 
      </div>
    
      <template id="login">
        <div>
          // 当直接在链接中使用?来进行Key value的拼接的时候,在组件中通过 $route.query 来接收要查询的数据  无需修改路由验证规则
            <h3>登录=------{{this.$route.query.name}}</h3>
        </div>
      </template>
    
      <template id="register">
         <div>
           // 当在连接中使用 /register/444 这样的路由的时候,并且需要修改router中的路由规则/register/:id,使用$route.params来获取数据
            <h3>注册------{{this.$route.params.id}}</h3>
         </div>
      </template>
    
      <script>
        var login = {
          template:"#login",
        }
        var register = {
          template:"#register",
        }
        const router = new VueRouter({
          routes:[
            { path:"/login", component:login },
            { path:"/register/:id", component:register },
         //还可利用props进行解耦,而不是使用$router获取参数
          //https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%87%BD%E6%95%B0%E6%A8%A1%E5%BC%8F ],
          linkActiveClass:"myactive", //点击切换组件的是时候 连接高亮 "myactive" 自定义类选择器
    
        })
    
       new Vue({
        el:"#app",
        data:{
        },
        components:{
          login,register
        },
        // 将路由和Vue实例实现绑定。
        router:router,//也可直接 router,
       })
     
     </script>
        

     4.命名视图

     <div id="app">
        <router-view></router-view> 
        <!-- 名字和components中的一样 -->
        <router-view name="left"></router-view>  
        <router-view name="right"></router-view> 
      </div>
    
      <template id="top">
        <div>
            <h3>top</h3>
        </div>
      </template>
    
      <template id="left">
         <div>
            <h3>left</h3>
         </div>
      </template>
      <template id="right">
          <div>
             <h3>right</h3>
          </div>
       </template>
    
      <script>
        var top1 = { //top 也不可以作为组件对象名
          template:"#top",
        }
        var left = {
          template:"#left",
        }
        var right = {
          template:"#right"
        }
        const router = new VueRouter({
          routes:[
            { 
              path:"/", 
              components:{ //是个components对象
                default: top1,
                left:left,
                right:right,
              }
             },
          ],
        })
    
       new Vue({
        el:"#app",
        data:{
        },
        components:{
          top,left,right
        },
        // 将路由和Vue实例实现绑定。
        router:router,//也可直接 router,
       })
     
     </script>

     5.导航守卫

    //router.js
    
    //参数和查询的改变并不会触发进入和离开的导航守卫 //全局前置守卫,是异步解析执行 //to 将要进入的路由对象 路由对象 // from 当前导航正要离开的路由 路由对象 // next 函数 参数 false 空参数 next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址 是必须调用的函数 router.beforeEach((to, from, next)=>{ //可以做拦截器 //有问题 if(to.path === "/mine"){ //在这里可能会出现溢出的情况,需要认真看。https://www.jianshu.com/p/1187f8f74a72 next('/home'); } next(); })



    //后置守卫
    router.afterEach((to, from) => {
       //和前置守卫参数基本一样
     })
     
     
    //路由独享守卫
    const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) => {
            // ...
          }
        }
      ]
    }}


    钩子函数的调用时机:
      //在切换组件的时候,
     1.导航被触发
     2.失效的组件调用 beforeRouteLeave
     3.全局的beforeEach
     4.重用的组件beforeRouteUpdate
     5.全局beforeEnter
     6.解析组件
     7.激活组件的beforeRouteEnter
     8.全局的beforeResolve
     9.导航被确认
     10.全局的afterEach
     11.更新DOM
     



  • 相关阅读:
    [包计划] date-fns
    [包计划] create-react-app
    [包计划] js-cookie
    [包计划] cheerio
    [包计划] 30-seconds-of-code
    new
    [源计划] array-first
    [源计划] is-sorted
    [源计划] array-flatten
    images
  • 原文地址:https://www.cnblogs.com/panjingshuang/p/11968835.html
Copyright © 2020-2023  润新知