__603 layout 布局

1.顶部 NavBar 组件

<van-nav-bar
  :title="title"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>

<script>
export default {
  data() {
    return {
      title: this.$route.meta.title,
    };
  },
  methods: {
    // 返回上一页
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

‍

2.底部 tabbar 组件

<van-tabbar
  v-model="active"
  v-if="$route.meta.isShow"
>
  <van-tabbar-item
    icon="home-o"
  ></van-tabbar-item>
  <van-tabbar-item
    icon="friends-o"
  ></van-tabbar-item>
  <van-tabbar-item
    icon="cart-o"
    info="666"
  ></van-tabbar-item>
  <van-tabbar-item
    icon="search"
  ></van-tabbar-item>
</van-tabbar>

‍

- 购物车小圆点

info

<van-tabbar-item
    to="/cart"
    icon="cart-o"
    info="666"
  ></van-tabbar-item>

‍

3.配置主体路由

to 同 vue-router 的to

<van-tabbar
  v-model="active"
  v-if="$route.meta.isShow"
>
  <van-tabbar-item
    icon="home-o"
    to="/home"              // to
  ></van-tabbar-item>
  <van-tabbar-item
    icon="friends-o"
    to="/friends"
  ></van-tabbar-item>
  <van-tabbar-item
    to="/cart"
    icon="cart-o"
    info="666"
  ></van-tabbar-item>
  <van-tabbar-item
    icon="search"
    to="/search"
  ></van-tabbar-item>
</van-tabbar>

1.引入 vue-router    import VueRouter from 'vue-router'

2.引入组件  import Com... from '@/views/..'

3.注册路由  Vue.use(VueRouter)

4.实例化路由对象 new VueRouter

5.配置路由规则  const routes

6.挂载路由    -- 设置路由和 vue 的关系

7.渲染路由    -- router-view router-link

配置404 redirect 重定向到首页

const routes = [
  {
    path: '/',
    component: () => import('@/layout'),
    redirect: '/home',
    children: [
  
    ],
  },
  {
    path: '*',
    component: () => import('@/views/404'),
  },
];

‍

4.动态修改 NavBar title

<!-- navbar  -->
<van-nav-bar
  v-if="$route.path === '/home'"
  :title="title"
  fixed
/>
<van-nav-bar
  v-else
  :title="title"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
  fixed
/>

const routes = [
  {
    path: '/',
    component: () => import('@/layout'),
    redirect: '/home',
    children: [
      {
        path: '/home',
        component: () => import('@/views/home'),
        meta: {
          title: '首页',
          active: 0,
          isShow: true,
        },
      },
      {
        path: '/home/newslist',
        component: () => import('@/views/news/newslist'),
        meta: {
          title: '新闻列表',
          isShow: false,
        },
      },
    ],
  },
  {
    path: '*',
    component: () => import('@/views/404'),
  },
];

// layout/index.vue 监听路由变化
watch: {
  $route(newVal) {
    this.title = newVal.meta.title;
  },
},