Vue前端框架的学习——06—(匹配404错误、嵌套路由、编程式导航、命名路由、命名视图、重定向和别名、node环境配置和npm、vue-cli的使用)

最新推荐文章于 2024-04-28 10:39:21 发布

越过山丘，佳人等候

最新推荐文章于 2024-04-28 10:39:21 发布

阅读量299

点赞数

分类专栏： VUE前端框架的学习文章标签： vue nodejs html 前端

本文链接：https://blog.csdn.net/weixin_42118531/article/details/105203058

版权

VUE前端框架的学习专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1、匹配404错误：

在路由规则中，* 代表的是任意字符。所以只要在路由的最后添加一个路由，那么以后没有匹配到的url都会被导入到这个视图中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-link to="/">首页</router-link>
        <router-link to="/profile">个人主页</router-link>
        <!-- 路由匹配到的组件将渲染到这里  vue-router的出口 -->
        <router-view></router-view>
    </div>
    
</body>
</html>

<!--vue引入   必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 加载vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
    //component  有组件名字    extend是没有组件的名字的
    var index = Vue.extend({template: "<h1>这是首页</h1>"})    //{}里面是个对象，
    var profile = Vue.extend(
        {template: "<h1>这是个人主页{{$route.params.userid}}</h1>",    //输出动态绑定的路由id
        
        mounted(){
            console.log(this.$route)     //输出路由中的参数数据
            console.log(this.$router)    //加强版本输出数据项目

            console.log(this.$route.params.userid)
            if(this.$route.params.userid != '123'){   //判断id是否等于
                this.$router.replace('/404')
            }
        }
    
    }) 

    //vue-router
    var router = new VueRouter({
        routes:[              //这里的routes需要注意，不同于其他
            {path:"/", component:index},
            {path:"/profile/:userid", component:profile},   //  动态绑定id  /:userid
            {path:"*", component:notfound},    // * 通配符  notfound匹配找不到的页面
            {path:"/404", component:notfound},    //notfound匹配找不到的页面
        ],
        
    })

    new Vue({
        el:"#app",
        data:{
        },
        router:router    //router 是关键字
    })
</script>

2、嵌套路由：

有时候在路由中，主要的部分是相同的，但是下面可能是不同的。比如访问用户的个人中心是/user/profile/，查看用户发的贴子是/user/posts/等。这时候就需要使用到嵌套路由。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"></link> 
</head>
<body>
    <div id="app">
        <router-link to="/">首页</router-link>
        <router-link to="/profile">个人主页</router-link>
        <!-- 路由匹配到的组件将渲染到这里  vue-router的出口 -->
        <router-view></router-view>
    </div>
    
</body>
</html>

<!--vue引入   必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 加载vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
    //component  有组件名字    extend是没有组件的名字的
    var index = Vue.extend({template: "<h1>这是首页</h1>"})    //{}里面是个对象，
    var profile = Vue.extend(
        {template: `
        <div>                      
            <h1>这是个人主页{{$route.params.userid}}</h1>
            <ul class="nav nav-tabs">
                <li role="presentation" class="active">
                    <router-link to="/user/123/setting">设置选项</router-link>
                </li>
                <li role="presentation">
                    <router-link to="/user/123/message">消息选项</router-link>
                </li>
            </ul>
        </div>
        `})    
    
    var setting = Vue.extend({template:"<h1>设置</h1>"}) 
    var mesage = Vue.extend({template:"<h1>消息</h1>"}) 

    //vue-router
    var router = new VueRouter({
        routes:[              //这里的routes需要注意，不同于其他
            {path:"/", component:index},
            {
                path:"/:userid", 
                component:profile,
                children:[                           //嵌套路由的核心部分
                    //访问默认界面
                    {path:"", component:setting},
                    //访问界面其他选项
                    {path:"setting", component:setting},
                    {path:"message", component:mesage},
                ]        
            },   

            //{path:"/profile/:userid/setting", component:setting},
        ],
        
    })

    new Vue({
        el:"#app",
        data:{
        },
        router:router    //router 是关键字
    })
</script>

显示界面如下：
在这里插入图片描述

3、编程式导航

之前我们学习了使用 <router - link> 可以在用户点击的情况下进行页面更新。但有时候我们想要在js中手动的修改页面的跳转，这时候就需要使用编程式导航了。

$router.push跳转：
想要导航到不同的URL，则使用router.push方法。这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的URL。

当你点击时，这个方法会在内部调用，所以说，点击<router -link :to="…">等同于调用router.push(…)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="gotoPost">列表</button>
        <button @click="gotofile">文件</button>
        <button @click="login">登录</button>
        <router-view></router-view>
    </div>
</body>
</html>

<!--vue引入   必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 加载vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
    //component  有组件名字    extend是没有组件的名字的
    var post = Vue.extend({template: "<h1>首页</h1>"})    //{}里面是个对象，
    
    var profile = Vue.extend({template:"<h1>个人中心</h1>"}) 

    var login = Vue.extend({template:"<h1>登录界面</h1>"}) 

    //vue-router
    var router = new VueRouter({
        routes:[              //这里的routes需要注意，不同于其他
            {path:"/post", component:post},
            {path:"/profile", component:profile, name:"myprofile"},
            {path:"/login", component:login, name:"login"},
        ],
    })
    new Vue({
        el:"#app",
        router:router,
        methods:{
            gotoPost:function(){
                this.$router.push("/post")
            },
            gotofile:function(){
                //this.$router.push("/profile")                  //下面的是另一种形式转到url尾部为new_userid
                this.$router.push({name:"myprofile",params:{userid:"new_userid"}})
            },
            login(){
                //wd?python      网页url显示为:/login?wd=python
                this.$router.push({path:"login", query:{wd:"python"}})
            },

        }
    })
</script>

声明式	编程式
<router -link :to="…">	router.push(…)

// 字符串
router.push(‘home’)

// 对象
router.push({ path: ‘home’ })

// 命名的路由
router.push({ name: ‘user’, params: { userId: ‘123’ }})

// 带查询参数，变成 /register?plan=private
router.push({ path: ‘register’, query: { plan: ‘private’ }})

注意：如果提供了path，params会被忽略，上述例子中的query并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的name或手写完整的带有参数的path：

const userId = ‘123’
router.push({ name: ‘user’, params: { userId }}) // -> /user/123
router.push({ path: /user/${userId} }) // -> /user/123
// 这里的 params 不生效
router.push({ path: ‘/user’, params: { userId }}) // -> /user

router.replace(location, onComplete?, onAbort?)：
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n)。

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默认失败
router.go(-100)
router.go(100)

4、命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建Router实例的时候，在routes配置中给某个路由设置名称。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

要链接到一个命名路由，可以给router-link的to属性传一个对象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

这跟代码调用 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})

实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- :to  冒号很重要 -->
        <router-link v-bind:to="{name:'index'}">HOME</router-link>
        <router-view></router-view>
    </div>
</body>
</html>

<!--vue引入   必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 加载vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>

    var home = Vue.extend({template:"<h1>首页</h1>"})
    var router = new VueRouter({
        routes:[
            {path:"/", name:"index", component:home}
        ]
    })
    new Vue({
        el:"#app",
        router:router,

    })
</script>

5、命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有sidebar(侧导航) 和main(主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view没有设置名字，那么默认为default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用components配置 (带上s)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="header">
            <router-view name="header"></router-view>
        </div>
        <div class="body">
            <router-view name="left"></router-view>
            <router-view name="right"></router-view>
        </div>
        <div class="footer">
            <router-view name="footer"></router-view>
        </div>
    </div>
</body>
</html>

<!--vue引入   必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 加载vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
    headerc = Vue.extend({template:"<h1>header部分</h1>"})
    leftc = Vue.extend({template:"<h1>left部分</h1>"})
    rightc = Vue.extend({template:"<h1>right部分</h1>"})
    footerc = Vue.extend({template:"<h1>footer部分</h1>"})

    var router = new VueRouter({
        routes:[
            {path:"/", components:{   //这里components是需要加s的
                header:headerc,   
                left:leftc,   
                right:rightc,   
                footer:footerc,  
            }}
        ]
    })
    new Vue({
        el:"#app",
        router:router,
    })
</script>

在这里插入图片描述

6、重定向和别名

重定向也是通过routes配置来完成，下面例子是从/a重定向到/b：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-view></router-view>
    </div>
</body>
</html>

<!--vue引入   必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 加载vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
    var article = Vue.extend({template:"<h1>这是文章</h1>"})

    var router = new VueRouter({
        routes:[
            // redirect重定向   重定向至后面的地址 /article
            {path:"/", redirect:"/article"},
            //  alias:"/list"  路由重新取名字   地址改为/list  显示界面也和上面一样
            {path:"/article", component:article, alias:"/list"},   
        ]
    })
    new Vue({
        el:"#app",
        router:router,
    })
</script>

重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

“重定向”的意思是，当用户访问/a时，URL将会被替换成/b，然后匹配路由为/b。

/a的别名是/b，意味着，当用户访问/b时，URL会保持为/b，但是路由匹配则为/a，就像用户访问/a一样。
上面对应的路由配置为：

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

7、node环境配置

nvm安装：
nvm（Node Version Manager） 是一个用来管理node版本的工具。我们之所以需要使用node，是因为我们需要使用node中的 npm(Node Package Manager)，使用npm的目的是为了能够方便的管理一些前端开发的包！nvm的安装非常简单，步骤如下：

到这个链接下载nvm的安装包：https://github.com/coreybutler/nvm-windows/releases
然后点击一顿下一步，安装即可，安装完成后，还需要配置环境变量。在我的电脑->属性->高级系统设置->环境变量->系统环境变量->Path下新建一个，把nvm所处的路径填入进去即可。
打开cmd，然后输入nvm，如果没有提示没有找不到这个命令。说明已经安装成功

Mac或者Linux安装nvm请看这里：https://github.com/creationix/nvm。也要记得配置环境变量

nvm常用命令

nvm常用命令：

nvm install [version]           ：安装指定版本的node.js。
nvm use [version]               ：使用某个版本的node。
nvm list                        ：列出当前安装了哪些版本的node。
nvm uninstall [version]         ：卸载指定版本的node。
nvm node_mirror [url]           ：设置nvm的镜像。
nvm npm_mirror [url]            ：设置npm的镜像。

node安装：
安装完nvm后，我们就可以通过nvm来安装node了。这里我们安装10.16.0版本的的`node.js。

nvm install 10.16.0

这个域名的服务器是在国外。因此会比较慢,我们可以设置一下nvm的源,之后再下载指定版本。

nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/

在这里插入图片描述

npm

npm(Node Package Manager) 在安装node的时候就会自动的安装了。当时前提条件是你需要设置当前的node的版本：nvm use 10.16.0。然后就可以使用npm了.

初始化：
在新的项目中，需要先执行 npm init 初始化，创建一个package.json文件用来保存本项目中用到的包。
在这里插入图片描述
安装包：
安装包分为全局安装和本地安装。全局安装是安装在当前node环境中，在可以在cmd中当作命令使用。而本地安装是安装在当前项目中，只有当前这个项目能使用，并且可以通过require引用。安装的方式只有-g参数的区别：

npm install vue                 # 本地安装
npm install vue --save          # 本地安装，并且保存到package.json的dependice中
npm install vue --save-dev      # 本地安装，并且保存到package.json的dependice-dev中
npm install vue -g              #全局安装
npm install -g @vue/cli         #全局安装vue-cli

本地安装
1、将安装包放在./node_modules下（运行 npm 命令时所在的目录），如果没有node_modules目录，会在当前执行npm命令的目录下生成node_modules目录。
2、可以通过require()来引入本地安装的包。

全局安装
1、将安装包放在/usr/local下或者你node的安装目录。
2、可以直接在命令行里使用。

在这里插入图片描述

卸载包：
npm uninstall [package]

更新包：
npm update [package]

搜索包：
npm search [package]

使用淘宝镜像：
npm的服务器在国外。那么可以安装一下cnpm，并且指定镜像为淘宝的镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org

以后就可以使用cnpm来安装包了.

手动安装npm：
有时候使用nvm安装完node后，npm没有跟着安装，这时候可以到https://github.com/npm/cli/releases下载6.10.1的版本。然后下载完成后，解压开来，放到v10.16.0/node_modules下，然后修改名字为npm，并且把npm/bin中的npm和npm.cmd两个文件放到v10.16.0根目录下。

8、vue-cli的使用

vue-cli是和vue进行深度组合的工具，可以快速帮我们创建vue项目，并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目，都是用vue-cli来创建项目的。

安装：
Vue CLI需要Node.js 8.9或更高版本 (推荐8.11.0+)。node环境安装后，直接通过npm install -g @vue/cli即可安装。安装完成后，输入vue --version，如果出现了版本号，说明已经下载完成。

在这里插入图片描述

用命令行创建项目：
1、在指定路径下使用vue create [项目名称]创建项目。
2、会让你选择要安装哪些包（默认是Babel和ESLint），也可以手动选择。
3、如果在安装的时候比较慢，可以在安装的时候使用淘宝的链接：vue create -r https://registry.npm.taobao.org [项目名称]。
4、如果实在不想在创建项目的时候都指定淘宝链接，可以在当前用户目录下，找到.npmrc，然后设置registry=https://registry.npm.taobao.org。
在这里插入图片描述
用界面创建项目：
打开cmd，进入到你项目存储的路径下。然后执行vue ui，就会自动打开一个浏览器界面。
按照指引进行选择，然后一顿下一步即可创建。

项目结构介绍
在这里插入图片描述

node_modules ---------------------------：本地安装的包的文件夹。
public ---------------------------------------：项目出口文件。
src -------------------------------------------：项目源文件：
assets----------------------------------------：资源文件，包括字体，图片等。
components--------------------------------：组件文件。(项目中可以编写的部分)
App.vue-------------------------------------：入口组件。
main.js--------------------------------------：webpack在打包的时候的入口文件。
babel.config.js----------------------------：es*转低级js语言的配置文件。
package.json-----------------------------：项目包管理文件。

运行该vue-cli项目操作：
在这里插入图片描述
网页界面显示如下：

组件定义和导入：
1、定义：组件定义跟之前的方式是一模一样的。只不过现在模板代码专门放到.vue的template标签中，所以不再需要在定义组件的时候传入template参数。另外，因为需要让别的组件使用本组件，因此需要用export default将组件对象进行导出。
2、导入：因为现在组件是在不同的文件中。所以如果需要引用，那么必须进行导入。用ES6语法的import XXX from XXX。
在这里插入图片描述
局部样式
默认情况下在.vue文件中的样式一旦写了，那么会变成全局的。如果只是想要在当前的组件中起作用，那么可以在style中加上一个scoped属性即可。示例代码如下：

// 这里是组件的格式
<style scoped>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */

body{
  /* 内外边距 */
  margin:0; 
  padding: 0;  

  /* 字体大小 */
  font-size: 80px;
}
</style>

使用sass语法
很多在写样式代码的时候，不喜欢用原生css，比较喜欢用比如sass或者less，这里我们以sass为例，我们可以通过以下两个步骤来实现：

安装loader：webpack在解析scss文件的时候，会去加载sass-loader以及node-loader，因此我们首先需要通过npm来安装一下：
npm install node-sass@4.12.0 --save-dev
npm install sass-loader@7.0.3 --save-dev

指定sass语言：在指定style的时候，添加lang="scss"属性，这样就会将style中的代码识别为scss语法。

//style这个模块就是制定组件的格式
<style lang="stylus">    //这里的lang="stylus"就是指定的语法

</style>

越过山丘，佳人等候

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue前端框架的学习——06—(匹配404错误、嵌套路由、编程式导航、命名路由、命名视图、重定向和别名、node环境配置和npm、vue-cli的使用)

1、匹配404错误：在路由规则中，* 代表的是任意字符。所以只要在路由的最后添加一个路由，那么以后没有匹配到的url都会被导入到这个视图中。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...
复制链接

扫一扫