Vue框架学习笔记-6

Vue中的路由

Vue中的路由（Routing）是通过Vue Router这个官方提供的路由管理器来实现的。Vue Router允许你通过不同的URL访问应用中不同的页面（组件），而无需重新加载页面。这对于构建单页应用（SPA, Single Page Application）至关重要。

使用步骤

1.定义路由对象

//script:
router: new VueRouter({
    routes:[
        {
            path:"/",
            component:{
                template:"#tianmao"
            }
        },
        {
            path:"/tianmao",
            component:{
                template:"#tianmao"
            }
        },
        {
            path:"/taobao",
            component:{
                template:"#taobao"
            }
        },
        {
            path:"/jingdong",
            component:{
                template:"#jingdong"
            }
        }
    ]
})

//html:
<ul id="list">
        <li>
            <!-- router-link 代替a链接
            to属性代替a链接中的href属性 -->
            <router-link to="/tianmao">天猫</router-link>
        </li>
        <li>
            <router-link to="/taobao">淘宝</router-link>
        </li>
        <li>
            <router-link to="/jingdong">京东</router-link>
        </li>
    </ul>
    <!-- 路由的占位 -->
    <router-view></router-view>

router-link 代替a链接
to属性代替a链接中的href属性
router-view路由的占位
router:实例的路由属性
VueRouter:Vue官方提供的路由对象
routes:路由的详细配置信息
$router:所有的路由
$route:当前路由

全局路由的定义方式：

//script
// 全局路由
let routes = [
    {
        path: "/", component: model1
    },
    {
        path: "/jingdong", component: jingdong
    },
    {
        path: "/taobao", component: taobao
    }
]
let router = new VueRouter({
    routes
})
let vm = new Vue({
    data() {
        return {
        }
    },
    router
})

Vue-cli项目的介绍

1.项目目录

src目录下是我们编写代码的文件，其目录下还包括vue.config.js是编写配置文件的位置。

App.vue是全局组件的文件，在其中写一些所有组件共有的代码，例如公共样式，公共数据等。
main.js中写的全局的公共组件。

2.组件介绍
template标签中是组件的容器View部分

script标签中定义了组件的Model部分

当前组件的样式 scoped表示样式私有化，通过scoped定义的样式只能在当前组件使用。

路由在Vue-cli项目中的使用

在项目根目录下创建目录router，新建后缀为.js的文件，作为项目的路由配置文件。

// 导入Vue
import Vue from "vue";
// 导入路由
import VueRouter from "vue-router";
// 使用路由
Vue.use(VueRouter)

// 导入所有通过路由跳转的组件
import HomeDemo from "@/components/home/HomeDemo.vue";
import MvDemo from "@/components/mv/MvDemo.vue";
import HotSinger from "@/components/singer/HotSinger.vue";
import CrossDemo from "@/components/cross/CrossDemo.vue";
import FuDemo from "@/components/datatransmit/FuDemo.vue";

const router=new VueRouter({
  routes:[
      {path:"/",component:HomeDemo},
      {path:"/home",component:HomeDemo},
      {path:"/mv",component:MvDemo},
      {path:"/hot",component:HotSinger},
      {path:"/cross",component:CrossDemo},
      {path:"/tran",component:FuDemo}
  ]
})
// 默认导出路由
export default router

接下来即可按照之前步骤在项目中使用路由。