Vue搭配路由的五步曲

Vue搭配路由

0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

单独开发的都是模块化编程 需要通过important require 导入

1. 创建组件（路由）

var Home = {template:"#home",mounted(){}}
var Find = {template:"#find",watch:{}}
var List = {template:"#list",data(){
            return {
                id:2021
            }
        }}
var NotFound = {template:"#notfound"}

2. 定义路由 每个路由应该映射一个组件。 component(组件) 和 path(路径) 必须一一匹配

const routes = [
            { path :"/home",component:Home} , 
            { path :"/find",component:Find} , 
            { path :"/list",component:List} , 
            { path:'/404', component:NotFound} ,
            { path:"*", component:NotFound}
        ]

3. 创建路由router实例 对象

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

4. 挂载路由到根实例对象

var vm = new Vue({
            el:"#app",
            router,
            })

5. 路由出口

路由匹配到的组件将渲染在这里

<router-view></router-view>

6.路由导航（可写可不写）

		<router-link to="/home">首页</router-link>
        <router-link to="/list">列表</router-link>
        <router-link to="/find">发现</router-link>