大纲:创建vue文件并访问
*创建vue文件,在views目录创建文件
*在文件的template节点中添加要显示的内容
*在route目录下的index.js文件中配置路由
*使用import引入vue文件
*配置路由
{
path:'/url',
component:引入的名称
}
*在App.vue中通过router-linker进行链接
*vue文件的页面结构,就是我们要在浏览器中实现的内容
*位置:在view下面创建
*命名要求:XXXXXView.vue 例如:UserLoginView.vue
<template>
<!--显示的内容--!>
</template>
<script>
export default{
name:'页面名称',
data(){
return{
//声明变量和值
名称:值
}
},
methods:{
函数名(){
//代码
}
}
}
</script>
<style scoped>
/*css样式*/
</style>
*在router目录下的index.js中配置路由(url与vue文件的对应关系)
*使用import引入需要的vue文件
import 名称 from '@/views/vue文件.vue'
*配置url和组件的对应关系
{
path:'/url',
compontent:名称
}
*例如:
{
path:'/demoView',
compoent:DemoView
}
*如何访问
*通过超链接访问
<router-link to="url">文本<router-link>
*在js代码完成跳转
this.$router.push("/url");
标签:文件,Vue,界面,url,js,vue,import,路由
From: https://blog.csdn.net/qichengcc/article/details/136783649