单文件组件和Vue中的路由（页面跳转的实现）

Posted 2023-03-17

参考技术A 路由就是根据网址的不同，返回不同的内容给用户。

入口文件main.js挂载了app这个挂载点，同时引入App组件和路由。

App.vue组件中使用<router-view>写入了路由，<router-view>使得每个页面显示的是根据路由设置当前地址所对应的内容。

以下为router目录下的index.js文件，文件写明了访问某个路径时显示哪个组件以及组件名是什么。这些组件都需要在文件头的部分进行引入。

在写每个组件的.vue文件的过程中，要在逻辑部分注明它的name，这与router/index.js中申明的组件name保持一致。

在需要实现点击跳转的元素区域使用<router-link :to=" "> to表示跳转到哪个页面，""内的内容按路由文件index.js配置的内容来确定格式。
下图绑定的是动态路由，:to=的内容由两部分组成。用+连接。

注：把<router-link>加到我们需要实现页面跳转的标签外时，会把标签内一些字体颜色改变。这是因为<router-link>默认是个<a>标签。我们可以直接用<router-link>包裹标签，再重新设定字体的颜色，但是其实有更好的方法。如图：把<li>标签直接改为<router-link>，然后在<router-link>内加入tag="li"，这样就可以解决字体颜色变化的问题了。

除了使用上述两种方法，还可以使用router的实例方法实现页面跳转。“ ”中写法与router/index.js中定义的形式保持一致。

用在函数中方式如下：

Vue-router VUE路由系统

 

一：定义：

是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

二:基本用法

实现页面的两个页面的来回跳转

<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/index">为业</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>


</div>

<script src="../es6/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
<script src="../js/app.js"></script>

html页面

 

var routes=[
    {
        path:‘/‘,
        component:{
            template:`
            <div>
            <h1>首页</h1>
</div>
            `
        }
    },

    {
      path:‘/index‘,
      component:{
          template:`
          <div>
          <h1>第二页</h1>
</div>
          
          `
      }
    }
]

var router=new VueRouter({
    routes:routes
})

new Vue({
    el:‘#app‘,
    router:router
})

在js页面

 

三：传参数：

      <router-link to="/user/王华">王华</router-link>
        <router-link to="/user/huahua">huahua</router-link>

 

 

{
      path:‘/user/:name‘,  # 这里用/：分割开要穿的参数
      component:{
          template:`
          <div>
          <h1>我叫：{{$route.params.name}}</h1>  #{{$route.params}}是固定格式后面.name跟的是路径后面的参数
</div>  
          `
      }
    }

js页面

还有一种的根据路径？后面加参数传参。自己了解。

 

四：子路由,推荐第二种

var routes=[
    {
        path:‘/user/:name‘,
        component:{
            template:`
            <div>
            <h1>首页</h1>
<router-link>{{$route.params.name}}<router-link>  #显示传参信息
<router-link :to=" ‘/user/‘ +$route.params.name  +‘more‘ "></router-link>
<router-view></router-view>   
#这里需要拼接路由，把子路由拼接到全部路由上。
</div>
            `
        }
        children:{
          path:‘more‘,
          component:{
           template:`
<div>
<h1>更多信息</h1>
</div>
`
}

}
   
    },

js文件中---拼接路径完成子路由

<router-link to="more" append>更多信息</router-link>
在后面加一个append就可以

js文件

PS：第一种要在to前面加上 ：，第二种则不需要

 

五：绑定点击事件，执行路径的方法

<input type="button" value="按钮" @click="surf"> 

#绑定点击时间

new Vue({
    el:‘#app‘,
    router:router,
    methods:{
        surf:function() {
            setTimeout(function () {
                this.router.push(‘/‘),      #把该路径的方法传到router里去
                    setTimeout(function () {
                        this.router.push(‘/user/huahua‘)   #再次把路径方法传到里面去
                    })
            }, 2000)
        }
    }
})

js页面

 

六：命名多个<router-view>

    <router-link to="/lit">first</router-link>
        <router-link to="/lat">second</router-link>

 <div>
        <router-view name="first"></router-view>
        <router-view name="second"></router-view>
    </div>

html页面

var res=[
    {
        path:‘/lit‘,
        component:{
            first:{                             #这里指定用哪个routes-view
                template:`
                <div>
                <h1>first</h1>
</div>
                
                `
            }
        }
    },
    {
        path:‘/lat‘,
        compenent:{
            second:{                                  #这里用second的routes-view
                template:`
                <h1>second</h1>
                `
            }
        }
    }
]

js页面