4-vue路由相关

安装路由

1. 用手脚架创建一个项目；

2.在项目位置打开终端，安装路由

• npm install vue-router --save-dev
• npm install vue-router --save
  -安装到开发环境
  npm install vue-router --save-dev
  -安装到生产环境
  npm install vue-router --save
  在 package.json 文件里可以看到，使用 --save-dev 安装的 插件，被写入到 devDependencies对象里面去，
  而使用 --save 安装的插件，则是被写入到 dependencies对象里面去。
  package.json 文件里面的 devDependencies 和 dependencies 的区别就是
  devDependencies 里面的插件只用于开发环境，不用于生产环境，
  而 dependencies 是需要发布到生产环境的。

配置

1. 在src文件夹新建router文件夹，在router文件夹新建index.js

配置index.js

图七.jpg

2.在src文件夹新建一个文件夹，在该文件夹内新建vue组件，然后在index.js文件配置路由

@（别名）代表 src
当你访问以film结尾的路径，就会对应访问views文件夹下的film组件

path:'./film'
component:()=>import('@/views/film')

当然访问film结尾的路径，就会对应

图八.jpg

3.在main.js导入index.js,放入vue的实例中

图九.jpg

4. 运行vue serve ./src/main.js

/**
 * 配置vue-router
 * 
 */
import Vue from 'vue';

import VueRouter from 'vue-router';

//使用插件，用use
Vue.use(VueRouter);

//路由的数组
//routes  是指定字符，不能乱写
export const routes =[
    {
       path: '/',
      //  重定向   打开跟路由的时候，跳转到cinema
     redirect: '/cinema'
    },
    {
        //访问路径
        path: '/film',
        //访问film的时候，显示以下组件
        component: ()=>import('@/views/film'),
        //配置子路由
        children: [
            {
                // 两种写法
                //path: '/film/list' ,
                path: 'list',
                component: ()=>import('@/views/film/list')
            },
            {  //动态路由，  :id  表示id作为参数传过去，而不是路由地址
                path: 'detail/:id',
                component: ()=>import('@/views/film/detail')
            }
        ]

    },
    {
        path: '/cinema',
        component:()=>import('@/views/cinema')
    },
    {
        path: '/pintuan',
        component:()=>import('@/views/pintuan')
    },
    {
        path: '/my',
        component:()=>import('@/views/my')
    },
    //404 路由
    {
        path: '*',
        component:()=>import('@/components/nothing')
    },




    //路由传参
    {
        path:'/abc/demo1',
        component:()=>import('@/views/abc/demo1')
    },
    {
        path:'/abc/demo2/:id',
        component:()=>import('@/views/abc/demo2')
    }



    

]
//实例化 VueRouter  
//新建一个 VueRouter对象，命名为 router
//把上面的路由数组routers 赋值给 router
const router = new VueRouter({
    routes
})
//导出router
export default router;

mian.js

import Vue from 'vue'
import App from './App.vue'
import '@/assets/css/reset.css'
import '@/assets/iconfont/iconfont.css';
import Vant from 'vant';
import 'vant/lib/index.css';
import index from '@/router/index.js'


Vue.use(Vant);

Vue.config.productionTip = false

new Vue({
  router:index,//  属性名必须是router
  render: h => h(App),
}).$mount('#app')


/** 
 * 引入变量名可以随意定义
 * import router from '@/router/index.js'
 * 
 * Vue对象里的属性名必须是router
 * 
 * new Vue({
 * router,
 * render: h => h(App),
 * }).$mount('#app')
 * 
 * 
 * 
 * */

index.js

// 导入路由
import Vue from 'vue';

// 变量名可以随意定义，要跟use里一致

import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
    {
        path:'/',
        name:"Home",
        component:()=>import('@/view/Home')
    },
    {
        path:'/abc',
        name:"abc",
        component:()=>import('@/view/abc')
    },
    {
        path:'/footer',
        name:"Footer",
        component:()=>import('@/components/Footer')
    }


];
// 变量名随意定义，要跟导出变量一致
const routerddd = new VueRouter({
    routes
});
export default routerddd;

App.vue

//路由跳转用
跳转到跟路由下的home路径
//router-link 是超链接    使用 tag把超链接变成div
跳转到跟路由下的home路径

编程式导航

编程式导航.jpg