路由

一 、路由

一 路由是什么？
对于单页面应用程序来说，主要通过URL中的 hash(#号) 来实现不同页面之间的切换，同时hash有一个特点：http 请求中不会包含 hash 的相关内容，所以单页面程序中的页面跳转主要用 hash 实现。

二、路由跳转 和 js跳转的区别
路由跳转：在单页面应用程序当中，大部分页面结构不变，只改变部分内容
a标签：每次点击都会刷新，重新加载页面

三、路由的配置
（1）路径：path（路由地址）
（2）名称：name
（3）对应的路由组件：component
（4）@：src的别名
（5）重定向：redirect
3、路由跳转

this.$router.push(  '  路由地址 '  )

1. 目标: 构建卖座网的四个页面
2. 多页应用与单页应用比较
3. 配置vue路由

多页应用与单页应用(SPA)

配置vue路由

安装路由

1. 用脚手架创建一个项目(my-app)
2. 文档地址: https://router.vuejs.org/zh/
3. 安装 npm install vue-router --save-dev

配置

1. 在src里新建router/index.js
2. 新建src/views,再创建四个组件
   film.vue cinema.vue pintuan.vue my.vue
3. 在router/index.js 配置路由路径和对应的组件(详见my-app源码)
4. 在main.js导入router/index.js, 放入vue的实例中

1. 在src里新建router/index.js

 //配置vue-router
 import Vue from 'vue';
//导入路由插件
 import VueRouter from 'vue-router';

 // 使用插件,用use  
 Vue.use(VueRouter);//Vue使用路由插件

// 路由的数组
const routes = [
    {
        // 访问路径
        path: '/film',
        // 访问/film,显示以下的组件
        component:()=>import('@/views/film'),
        // 配置film下面的子路由
        children: [
            {
                // path: '/film/list',
                path: 'list',
                component: ()=> import('@/views/film/list')
            }
        ]
    },
    {
        path: '/cinema',
        component:()=>import('@/views/cinema')
    }
]
const router = new VueRouter({
    routes: routes
});
export default router; //导出

2. 新建src/views,再创建四个组件

图片.png