vue-编程基础-单页面应用与路由器-09

最新推荐文章于 2023-04-22 21:44:50 发布

山茶-峰

最新推荐文章于 2023-04-22 21:44:50 发布

阅读量162

点赞数

分类专栏： vue框架脚手架文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44651559/article/details/117219378

版权

vue框架同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

脚手架

5 篇文章 0 订阅

订阅专栏

单页面应用

单页面应用简称SPA，这种模式是综合组件化开发实现的；将一个页面划分为各个组件，实现页面的开发

单页面应用的实现

单页面应用的实现可以分为三步：

先创建一个完整的HTML页面，该页面包含vue的基本结构：

包含vue实现的父元素标签，以及vue的根组件实现javascript代码

<body>
    <div id="app">
    </div>
    <script>
        new Vue({
            el:"#app",
            router
        });
    </script>
</body>

引入必要的组件文件和vue脚本，业绩路由脚本

路由脚本vue-router.js文件
在vue根标签中使用路由的标签引入路由组件<div id= 'app'><router-view></router-view></div>为今后的页面组件预留空位

<body>
    <div id="app">
        <my-header></my-header>
        <router-view></router-view>
    </div>
    <script>
        /* 在new Vue()前，将页头组件对象转化为全局组件    */
        Vue.component("my-header", MyHeader);
        new Vue({
            el:"#app",
            router
        });
    </script>
</body>

创建路由文件router.js，创建路由器对象

创建路由字典

var routes=[
    {path:"/", component: Index},
    {path:"/details", component: Details},
    {path:"*", component: NotFound}
];

创建路由器对象，并将路由字典转入路由器对象中

var router=newRouter({routers})

/* 包含两部分 */
/*1. 路由字典: 保存路径与组件对象之间的对应关系 -->*/
var routes=[
    {path:"/", component: Index},
    {path:"/details", component: Details},
    {path:"*", component: NotFound}
];
/* 2. 自己创建的路由器对象: 必须将路由字典装入路由器对象中*/
var router=new VueRouter({ routes });

将router对象加入到new Vue（）中

回到唯一完整的HTML页面中: new Vue({ el:"#app", router })

<script>
    /* 在new Vue()前，将页头组件对象转化为全局组件    */
    Vue.component("my-header", MyHeader);
    new Vue({
        el:"#app",
        router
    });
</script>

页头等全局组件

创建独立的文件保存页头组件的内容

//先创建一个普通的子组件
var MyHeader={
template:`<header>
    <h1 style="color:orange">这里是页头</h1>
    <hr/>
</header>`
}

使用Vue.component(“my-header”,{ … })将页头创建为全局组件

//在new Vue()前，将页头组件对象转化为全局组件
Vue.component("my-header", MyHeader);

在唯一完整的HTML页面中引入页头组件文件

<div id="app">
    <my-header></my-header>
    <router-view></router-view>
</div>

使用页头组件标签<my-header/>: 2种:
- 1). 如果所有页面都有统一的页头:
  就放在唯一完整的html页面中外部上方
- 2). 如果有的页面有页头，有的页面没有页头:
  就只放在需要页头的组件中的template中

路由器的跳转

html中: <router-link to="/相对路径">文本<router-link>

//先创建一个普通的子组件
var MyHeader={
  template:`<header>
    <h1 style="color:orange">这里是页头</h1>
    <ul>
      <li><router-link to="/">首页</router-link></li>
      <li><router-link to="/details">详情页</router-link></li>
    </ul>
    <hr/>
  </header>`
}

js中: this.$router.push("/相对路径")

//页面组件对象名习惯上以大写字母开头
var Index={
  template:`<div>
    <h1 style="color:blue">这里是首页</h1>
    <button @click="goto" >查看5号商品的详细信息</button>
  </div>`,
  methods:{
    goto(msg){
      this.$router.push(`/details`)
    }
  }
}

路由传参

修改路由字典:
{path:"/相对路径/:自定义参数名", component:页面组件对象, props:true}

//包含两部分
//1. 路由字典: 保存路径与组件对象之间的对应关系
var routes=[
{path:"/", component: Index},
{path:"/details/:msg", component: Details,props:true},
{path:"*", component: NotFound}
];

跳转时:

<router-link to="/相对路径/参数值">

var MyHeader={
  template:`<header>
    <h1 style="color:orange">这里是页头</h1>
    <ul>
      <li><router-link to="/">首页</router-link></li>
      <li><router-link to="/details/10">详情页10</router-link></li>
    </ul>
    <hr/>
  </header>`
}

this.$router.push("/相对路径/参数值")

//页面组件对象名习惯上以大写字母开头
var Index={
    template:`<div>
        <h1 style="color:blue">这里是首页</h1>
        <button @click="goto(5)" >查看5号商品的详细信息</button>
        <button @click="goto(10)" >查看10号商品的详细信息</button>
        <button @click="goto(15)" >查看15号商品的详细信息</button>
        <button @click="goto(20)" >查看20号商品的详细信息</button>
        <button @click="goto(25)" >查看25号商品的详细信息</button>
    </div>`,
    methods:{
        goto(msg){
        this.$router.push(`/details/${msg}`)
        }
    }
}

下一个页面接:

1). props:[ ‘自定义参数名’ ]
2). 可将"自定义参数名"用作绑定或程序中都行
```
var Details={
props:['msg'],
template:`<h1 style="color:green" >这里是详情页{{msg}}</h1>`
}
```

山茶-峰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue-编程基础-单页面应用与路由器-09

单页面应用单页面应用简称SPA，这种模式是综合组件化开发实现的；将一个页面划分为各个组件，实现页面的开发单页面应用的实现单页面应用的实现可以分为三步：先创建一个完整的HTML页面，该页面包含vue的基本结构：包含vue实现的父元素标签，以及vue的根组件实现javascript代码<body> <div id="app"> </div> <script> new Vue({ el
复制链接

扫一扫